css样式
1、样式分类
一般样式
包括文字，字体，背景等
布局样式
包括定位，浮动，显示隐藏等
动画样式
包括渐变，过渡，动画等
2 、css的注释
/*注释内容*/
3 、常用的一般样式
1）背景属性：
background-color：设置一个元素的背景颜色
background-image：设置一个元素的背景图像
background-position：设置背景图像的起始位置
background-repeat：设置如何平铺对象的 background-image 属性
background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动
Background：背景缩写属性可以在一个声明中设置所有的背景属性
语法：background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
background-size：指定背景图片大小
2）文本属性
color: 指定文本的颜色
text-align：指定元素文本的水平对齐方式
text-decoration：规定添加到文本的修饰
text-indent：规定文本块中首行文本的缩进
text-transform ：控制文本的大小写
……
3）字体属性
font-family：指定一个元素的字体
font-size：属性设置字体大小
font-style：属性指定文本的字体样式
font-weight ：属性设置文本的粗细
4、盒子模型
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
盒子的宽度 = width + padding + border
盒子的高度 = height + padding+ border
但是在实际布局中，这种写法比较麻烦， 例如，定义了一个宽高都为200px的div，想加个padding为20px，这时，这个div就会整体变大。
如果不想他变大，就要把width和height改成160px。每次都要去算，很麻烦。
所以，引入box-sizing这个属性：
box-sizing 属性允许以某种方式定义某些元素，以适应指定区域
当设置box-sizing:border-box后，就不会出现上面那种情况
就变成了：
盒子的宽度 = width-padding - border
盒子的高度 = height -padding- border
这种写法实际开发时常用。
对于margin，有一个特殊的注意：
当父标签的每一个子元素设边距后，会作用到父标签上
5、 定位属性
1）显示/隐藏
display：属性规定元素应该生成的框的类型
属性值：
none：此元素不会被显示
block：此元素将显示为块级元素，此元素前后会带有换行符
inline：默认。此元素会被显示为内联元素，元素前后没有换行符
inline-block：行内块元素
visibility：指定一个元素是否是可见的
display:none和visibility:hidden的区别：
display:none：隐藏的元素不会占用任何空间，该元素原本占用的空间也会从页面布局中消失。
visibility:hidden：隐藏的元素仍需占用与未隐藏之前一样的空间，虽然被隐藏了，但仍然会影响布局
2）浮动
当一个元素被定为浮动后，他就从页面“漂“起来了，实际应用时注意：先定义一个宽高确定的区域，其里面的元素就可以随意浮动了。
3）overflow 属性
4）position 属性
属性值
fixed：固定定位，相对于浏览器窗口进行定位
relative：相对定位，相对其正常位置进行定位
有两个作用：1限制子元素 2微调位置
absolute：绝对定位，相对最近的有position属性的父标签定位，最顶层父标签是<body>
5）top，bottom，left，right
定义元素的具体位置，一般写两个值就可以
6）z-index 属性
z-index 属性指定一个元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
练习：页面首页布局
html代码：
<!--head start--> <header class="g-head"> <div class="head"> <a href=""><img src="img/logo.png" class="logo"/></a> <a href="" class="en">english</a> <div class="con"> <p> <a href="">在校生<span>+</span></a> <a href="">教职工<span>+</span></a> <a href="">考生<span>+</span></a> <a href="">校友<span>+</span></a> <a href="">访客<span>+</span></a> </p> <div class="input"> <input type="text" placeholder="请输入关键字"/> <input type="button"/> </div> </div> </div> <ul class="m-nav"> <li><a href="">首页</a></li> <li><a href="">新闻网</a></li> <li><a href="">学校概况</a></li> <li><a href="">机构设置</a></li> <li><a href="">师资队伍</a></li> <li><a href="">科学研究</a></li> <li><a href="">人才培养</a></li> <li><a href="">招生就业</a></li> <li><a href="">大学文化</a></li> <li><a href="">国际交流</a></li> <li><a href="">校友联谊</a></li> </ul> </header> <!--head end--> <!--content start--> <div class="m-banner"><img src="img/bg.jpg"/></div> <section class="g-index"> <div class="m-left p-fl"> <h2 class="u-title"> <span>学校要闻</span> <a href="">[更多]</a> </h2> <h3><a href="">学校举办2018年暑期工作研讨班</a></h3> <p> <a href="">本网讯8月31日至9月1日上午，学校在杏园北楼二层会议室举办2018年暑期工作研讨班，认真学习贯彻上级有关会议精神，准确把握新时代高等教育...</a> <a href="">[详细]</a> </p> <ul class="m-list"> <li><a href="">纪念改革开放40周年作品征集启事纪念改革开放40周年</a><span>05-04</span></li> <li><a href="">智能电网实验室被认定为山东省工程实验室</a><span>05-04</span></li> <li><a href="">学校召开迎新工作协调会</a><span>05-04</span></li> <li><a href="">校领导新学期第一天深入课堂听课</a><span>05-04</span></li> <li><a href="">吕传毅对职能部门提出工作职责要求</a><span>05-04</span></li> <li><a href="">校领导视察国际学生新生报到工作</a><span>05-04</span></li> </ul> <h2 class="u-title p-mt20"> <span>媒体报道</span> <a href="">[更多]</a> </h2> <ul class="m-list"> <li><a href=""><em>【领导科学报】</em>纪念改革开放40周年作品征集启事纪念改革开放40周年</a></li> <li><a href=""><em>【山东高校思政】</em>智能电网实验室被认定为山东省工程实验室</a></li> <li><a href=""><em>【山东省教育厅】</em>学校召开迎新工作协调会</a></li> <li><a href=""><em>【中国青年网】</em>校领导新学期第一天深入课堂听课</a></li> </ul> </div> <div class="m-center p-fl"> <h2 class="u-title"> <span>图说理工</span> <span>视图理工</span> </h2> <div class="img"><img src="img/img-1.jpg"/></div> <h2 class="u-title p-mt20"> <span>综合新闻</span> <a href="">[更多]</a> </h2> <ul class="m-list"> <li><a href="">纪念改革开放40周年作品征集启事纪念改革开放40周年</a></li> <li><a href="">智能电网实验室被认定为山东省工程实验室</a></li> <li><a href="">学校召开迎新工作协调会</a></li> <li><a href="">校领导新学期第一天深入课堂听课</a></li> <li><a href="">纪念改革开放40周年作品征集启事纪念改革开放40周年</a></li> <li><a href="">智能电网实验室被认定为山东省工程实验室</a></li> <li><a href="">学校召开迎新工作协调会</a></li> <li><a href="">校领导新学期第一天深入课堂听课</a></li> </ul> </div> <div class="m-right p-fl"> <h2 class="u-title"> <span>学术活动</span> <a href="">[更多]</a> </h2> <ul class="m-list-a"> <li> <div class="p-fl date"> <p>2018</p> <span>09-13</span> </div> <article class="p-fl con"> <h3><a href="">过渡金属氧化物电子配置环...</a></h3> <p>主讲:李文献教授</p> <p>地点:13号教学楼404</p> </article> </li> <li> <div class="p-fl date"> <p>2018</p> <span>09-13</span> </div> <article class="p-fl con"> <h3><a href="">过渡金属氧化物电子配置环...</a></h3> <p>主讲:李文献教授</p> <p>地点:13号教学楼404</p> </article> </li> <li> <div class="p-fl date"> <p>2018</p> <span>09-13</span> </div> <article class="p-fl con"> <h3><a href="">过渡金属氧化物电子配置环...</a></h3> <p>主讲:李文献教授</p> <p>地点:13号教学楼404</p> </article> </li> <li> <div class="p-fl date"> <p>2018</p> <span>09-13</span> </div> <article class="p-fl con"> <h3><a href="">过渡金属氧化物电子配置环...</a></h3> <p>主讲:李文献教授</p> <p>地点:13号教学楼404</p> </article> </li> </ul> <h2 class="u-title p-mt20"> <span>专题·公告</span> <a href="">[更多]</a> </h2> <ul class="m-list"> <li><a href="">纪念改革开放40周年作品征集启事纪念改革开放40周年</a></li> <li><a href="">智能电网实验室被认定为山东省工程实验室</a></li> <li><a href="">学校召开迎新工作协调会</a></li> <li><a href="">校领导新学期第一天深入课堂听课</a></li> </ul> </div> </section> <!--content end--> <!--foot start--> <footer class="g-foot"> <ul class="nav"> <li><a href="">图书馆</a></li> <li><a href="">信息公开</a></li> <li><a href="">招标采购</a></li> <li><a href="">办公系统</a></li> <li><a href="">邮件系统</a></li> <li><a href="">校园VPN</a></li> <li><a href="">在线学习</a></li> <li><a href="">站点导航</a></li> </ul> <div class="info"> <div class="center"> <span class="word p-fl"></span> <div class="copy p-fl"> <p>版权所有©山东理工大学 地址：山东省淄博市张店区新村西路266号（255000）</p> <p>设计维护：网络信息中心 鲁ICP备05002357号</p> </div> <div class="icon"> <a href=""><img src="img/foot-weibo.png"/></a> <a href=""><img src="img/foot-weixin.png"/></a> <a href=""><img src="img/foot-mail.png"/></a> <a href=""><img src="img/foot-img.png"/></a> </div> </div> </div> </footer> <!--foot end-->
css代码：
/* reset */
*{padding: 0;margin: 0;}
html{box-sizing: border-box;}
html *{box-sizing: inherit;}
body{font-size: 12px;line-height: 1;}
h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight: normal;}
a{text-decoration: none;color: #666;}
a:hover{color: #de0032;}
a img,input{border: none;}
ul{list-style: none;}
/* common */
.p-fl{float: left;}
.p-mt20{margin-top: 20px;}
.u-title{padding-bottom: 8px;background:url(../img/line.jpg) bottom no-repeat;background-size: 100% 1px;overflow: hidden;}
.u-title span{margin-right: 10px;font-size: 16px;}
.u-title a{float: right;margin-top: 5px;color: #de0032;}
/* head */
.g-head{width: 1000px;margin: 0 auto;}
.g-head .head{padding: 22px 0;border-bottom: 1px solid #dedede;overflow: hidden;}
.g-head .logo{float: left;width: 325px;}
.g-head .en{float: left;padding: 2px 5px;margin: 50px 0 0 15px;color: #fff;text-transform: uppercase;background: #eb1548;}
.g-head .con{float: right;}
.g-head .con p a{margin-right: 8px;}
.g-head .con p a span{display: inline-block;margin-left: 5px;color: #afafaf;transform: scale(0.8);}
.g-head .input{float: right;margin-top: 20px;}
.g-head .input input[type="text"]{float: left; width: 154px;height: 30px;padding: 0 5px;border: 1px solid #a9a9a9;}
.g-head .input input[type="button"]{float: left;width: 39px;height: 30px;background: #0168b7 url(../img/search.png) center no-repeat;cursor: pointer;}
.m-nav{text-align: center;}
.m-nav li{display: inline-block;height: 52px;line-height: 52px;margin: 0 14px;font-size: 16px;}
/* index */
.m-banner img{display: block;width: 100%;}
.g-index{width: 960px;margin: 30px auto 0;overflow: hidden;}
.m-left{width: 330px;}
.m-left h3{margin: 20px 0 15px;font-size: 14px;font-weight: bolder;text-align: center;}
.m-left h3 a{color: #286cc9;}
.m-left p{padding-bottom:20px;line-height: 23px;text-indent: 2em;border-bottom: 1px solid #dedede;}
.m-list{margin-top: 10px;}
.m-list li{height: 31px;line-height: 30px;border-bottom:1px dotted #ddd;overflow: hidden;}
.m-list li span{float: right;color: #666;}
.m-list li a{display: inline-block;max-width: 280px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.m-list li a:before{content: "";display: inline-block;width: 3px;height: 3px;margin:0 10px 0 1px;vertical-align: middle;background: #666;}
.m-list li em{font-style: normal;color: #de0032;}
.m-center{width: 314px;margin: 0 33px;}
.m-center img{display: block;width: 100%;height: 194px;margin-top: 18px;border: 1px solid #555;}
.m-right{width: 250px;}
.m-list-a li{padding: 13px 0;border-bottom:1px dotted #ddd;overflow: hidden;}
.m-list-a .date{width: 46px;height: 50px;margin-top: 5px;border:1px solid #c9c9c9;text-align: center;}
.m-list-a .date p{height: 25px;line-height: 22px;margin-bottom: 5px;color: #fff;background: url(../img/date.png) no-repeat;}
.m-list-a .con{width: 170px;margin-left: 15px;}
.m-list-a .con h3{font-size: 13px;}
.m-list-a .con p{margin-top: 10px;}
/* foot */
.g-foot{margin-top: 20px;border-top: 1px solid #ccc;}
.g-foot .nav{padding: 15px 0;text-align: center;}
.g-foot .nav li{display: inline-block;font-size: 14px;}
.g-foot .nav li:before{content: "";display: inline-block;width: 4px;height: 4px;margin: 0 34px;vertical-align: middle;background: #a9a9a9;}
.g-foot .nav li:first-child:before{display: none;}
.g-foot .nav li a{color: #080808;}
.g-foot .nav li a:hover{color: #de0032;}
.g-foot .info{padding: 20px 0;background: #444;}
.g-foot .info .center{width: 960px;margin: 0 auto;overflow: hidden;}
.g-foot .word{width: 219px;height: 19px;margin-top: 20px;background: url(../img/foot-word.png) no-repeat;}
.g-foot .copy{padding: 5px 30px;margin:10px 0 0 30px;color: #9a9a9a;border-left:1px solid #6b6d6c;border-right:1px solid #6b6d6c;}
.g-foot .copy p:first-child{margin-bottom: 10px;}
.g-foot .icon{float: right;}
.g-foot .icon img{margin-left: 10px;vertical-align: middle;}
页面效果截图：
个人总结：
这部分最难的就是定位了，需要好好理解。
盒子模型要理解透，才能把页面布局做好。
浙公网安备 33010602011771号