第二回作业

2017-01-18  本文已影响0人  这就是个帅气的名字

1.CSS是层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言。是控制div各种形状的语法。
2.Id选择器;
类选择器 ;
HTML元素选择器;
通配符选择器;
3.background后可添加任意的你想要的背景,颜色,位置(x y)等
4.font-size:文字大小
font-weight:加粗 bold: normal:正常
font-style:文字样式 italic 斜体 normal:正常
line-height:行高
font-family:"宋体"; 控制字体
复合样式:顺序不能改
font:font-weight font-style font-size/ine-height font-family
font中必有:font-size font-family
5.text-indent:首行缩进 2em为两个字节
6.格式<a href="地址">名</a>
href="页面地址"--跳转页面
href="压缩包地址"--下载
锚点 href="id"直接跳转到id所在位置
7.<a href="地址">网页名</a>
默认带下划线,字体蔚蓝色,访问后为紫色
8.盒子包括:内容(content)、填充(padding)、边框(border)、边界(margin), 由于其长得像个盒子,叫盒模型。
9.padding:内填充 边框以里,内容以外
margin:外边距 边框外面
10.margin叠加:相邻两个元素的上下margin是叠加在一起的。
margin传递:子元素的margin会传递给父级。
11.h1-h6 :标题(1-6逐渐变小),p>段落标签 section:版块,
header:页面头部。
footer:页面底部。
12.DIV是块元素 自己独立一行,宽度撑满整行
,SPAN是内嵌元素 不支持宽高,对padding和margin支持的也有问题,宽度由内容撑开
块元素:<div></div> <table></table>
内嵌元素:<span> </span> <input>

编程
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>

div1{width:0px;

height:0px;

border:100px solid red;
border-bottom:100px solid white;
margin:400px auto;
}</style>
</head>

<body>
<div id="div1"></div>
</body>
</html>

2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>

box {

width:513px;
height:350px;
border:1px solid black;
padding:0 22px;
}

title {

width:108px;
height:43px;
margin:0px 404px 0px 2px;
font:bold 23px "宋体"; color:#3f5062;
}

body1 {

width:230px;
height:55px;
margin:1px 290px 0px 2px;
font:bold 20px/54px "宋体"; color red;
}

body2 {

width:470px;
height:80px;
margin:0px 51px 30px 2px;
font:14px "宋体";
color:#9b9b9b;
text-indent:2em;
border-bottom:1px dashed black;
}

body3 {

width:270px;
font:bold 17px"宋体";
text-indent:20px
}

body4 {

width:270px;

font:bold 17px "宋体";
text-indent:18px
}

body5 {

width:270px;

font:bold 17px"宋体";
text-indent:18px
}

body6 {

width:270px;

font:bold 17px/37px "宋体";
text-indent:18px
}</style>
</head>

<body><div id="box">
<div id="title">动态新闻</div>
<div id="body1">掌握一门技术的重要性</div>
<div id="body2">掌握一门技术是未来生存的一块敲门砖,掌握一门技术是未来生存的一块敲门砖,掌握一门技术是未来生存的一块敲门砖</div>
<div id="body3">走进民企观摩学习与民企面对面</div>
<div id="body4">走进民企观摩学习与民企面对面</div>
<div id="body5">走进民企观摩学习与民企面对面</div>
<div id="body6">走进民企观摩学习与民企面对面</div>
</div>
</body>
</html>

上一篇下一篇

猜你喜欢

热点阅读