阿里云搭建网站教程,来客网站建设,做网站得做多少网页,中国字体设计目录
1. 浮动
1.1 标准流#xff08;普通流/文档流#xff09;
1.2 浮动
1.2.1 浮动的特性
1.2.2 浮动元素常和标准流父级搭配使用
1.2.3 案例
2. 常见网页布局
2.1 常见网页布局
2.2 浮动布局注意点
3. 清除浮动
3.1 原因
3.2 清除浮动的本质
3.3 清除浮动的方…目录
1. 浮动
1.1 标准流普通流/文档流
1.2 浮动
1.2.1 浮动的特性
1.2.2 浮动元素常和标准流父级搭配使用
1.2.3 案例
2. 常见网页布局
2.1 常见网页布局
2.2 浮动布局注意点
3. 清除浮动
3.1 原因
3.2 清除浮动的本质
3.3 清除浮动的方法
3.3.1 额外标签法
3.3.2 父级添加overflow
3.3.3 after 伪元素法
3.3.4 双伪元素清除浮动
3.3.5 总结
4. PS 切图
5. 学成在线案例
CSS 属性书写顺序
页面布局整体思路
头部制作 1. 浮动 1.1 标准流普通流/文档流 1.2 浮动 1.2.1 浮动的特性
1. 脱标 2. 行内显示并且顶端对齐
行内块元素间有缝隙 3. 浮动的元素具有行内块元素的特性 1.2.2 浮动元素常和标准流父级搭配使用 摆放盒子先大小后位置
1.2.3 案例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}.box {width: 1226px;height: 615px;background-color: pink;margin: 0 auto;}.left {float: left;width: 234px;height: 615px;background-color: purple;}.right {float: right;width: 992px;height: 615px;background-color: skyblue;}li {float: left;width: 234px;height: 300px;background-color: #fff;list-style: none;margin-left: 14px;margin-bottom: 14px;}li img {width: 100%;}/style
/headbodydiv classboxdiv classleft/divdiv classrightulliimg src../img1.jpg/lili/lili/lili/lili/lili/lili/lili/li/ul/div/div
/body/html
2. 常见网页布局
2.1 常见网页布局 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}.top {height: 50px;background-color: gray;}.banner {width: 980px;height: 150px;background-color: gray;margin: 10px auto;}.box {height: 300px;width: 980px;background-color: pink;margin: 0 auto;}li {list-style: none;}.box li {float: left;width: 237px;height: 300px;background-color: gray;margin-right: 10px;}.box .last {margin-right: 0;}/* 只要是通栏的盒子和浏览器一样宽不需要指定宽 */.footer {height: 200px;background-color: gray;margin-top: 10px;}/style
/headbodydiv classtoptop/divdiv classbannerbanner/divdiv classboxulli1/lili2/lili3/lili classlast4/li/ul/divdiv classfooterfooter/div
/body/html
2.2 浮动布局注意点 3. 清除浮动
3.1 原因 3.2 清除浮动的本质 3.3 清除浮动的方法 3.3.1 额外标签法 3.3.2 父级添加overflow 3.3.3 after 伪元素法 3.3.4 双伪元素清除浮动 3.3.5 总结 4. PS 切图
4.1 常见图片格式
4.2 图层切图 4.3 切片切图 4.4 PS 插件切图 5. 学成在线案例
准备工作 CSS 属性书写顺序 页面布局整体思路 头部制作 HTML代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title学成在线首页/titlelink relstylesheet hrefstyle.css
/headbody!-- 1.头部区域 --div classheader w!-- logo部分 --div classlogoimg srclogo.png/div!-- 导航栏部分 nav --div classnavullia href#首页/a/lilia href#课程/a/lilia href#职业规划/a/li/ul/div!-- 搜索框 --div classsearchinput typetext value输入关键词button/button/div!-- 用户模块 --div classuserimg srcuser.png altqq-lilei/div/div!-- 2.banner部分 --div classbanner!-- 版心 --div classwdiv classsubnavullia href#前端开发span/span/a/lilia href#后端开发span/span/a/lilia href#移动开发span/span/a/lilia href#人工智能span/span/a/lilia href#商业预测span/span/a/lilia href#云计算大数据span/span/a/lilia href#运维测试span/span/a/lilia href#UI设计span/span/a/lilia href#产品span/span/a/li/ul/div!-- 课程表模块 --div classcourseh2我的课程表/h2div classbdullih4继续学习 程序语义设计/h4p正在学习-使用对象/p/lilih4继续学习 程序语义设计/h4p正在学习-使用对象/p/lilih4继续学习 程序语义设计/h4p正在学习-使用对象/p/li/ula href# classmore全部课程/a/div/div/div/div!-- 3.精品推荐模块 --div classgoods wh3精品推荐/h3ullia href#JQuery/a/lilia href#Spark/a/lilia href#MySQL/a/lilia href#JavaWeb/a/lilia href#MySQL/a/lilia href#JavaWeb/a/li/ula href# classmod修改兴趣/a/div!-- 4.box核心内容其余 --div classbox wdiv classbox-hdh3精品推荐/h3a href#查看全部/a/divdiv classbox-bdul classclearfixliimg srcpic.png alth4Think PHP 5.0 博客系统实战项目演练/h4div classinfospan高级/span • 1125人在学习/div/liliimg srcpic.png alth4Think PHP 5.0 博客系统实战项目演练/h4div classinfospan高级/span • 1125人在学习/div/liliimg srcpic.png alth4Think PHP 5.0 博客系统实战项目演练/h4div classinfospan高级/span • 1125人在学习/div/liliimg srcpic.png alth4Think PHP 5.0 博客系统实战项目演练/h4div classinfospan高级/span • 1125人在学习/div/liliimg srcpic.png alth4Think PHP 5.0 博客系统实战项目演练/h4div classinfospan高级/span • 1125人在学习/div/liliimg srcpic.png alth4Think PHP 5.0 博客系统实战项目演练/h4div classinfospan高级/span • 1125人在学习/div/liliimg srcpic.png alth4Think PHP 5.0 博客系统实战项目演练/h4div classinfospan高级/span • 1125人在学习/div/liliimg srcpic.png alth4Think PHP 5.0 博客系统实战项目演练/h4div classinfospan高级/span • 1125人在学习/div/liliimg srcpic.png alth4Think PHP 5.0 博客系统实战项目演练/h4div classinfospan高级/span • 1125人在学习/div/liliimg srcpic.png alth4Think PHP 5.0 博客系统实战项目演练/h4div classinfospan高级/span • 1125人在学习/div/li/ul/div/div!-- 5.footer 模块 --div classfooterdiv classwdiv classcopyrightimg srclogo.png altp学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。br© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号/pa href# classapp下载APP/a/divdiv classlinksdldt关于学成网/dtdda href#关于/a/dddda href#管理团队/a/dddda href#工作机会/a/dddda href#客户服务/a/dddda href#帮助/a/dd/dldldt关于学成网/dtdda href#关于/a/dddda href#管理团队/a/dddda href#工作机会/a/dddda href#客户服务/a/dddda href#帮助/a/dd/dldldt关于学成网/dtdda href#关于/a/dddda href#管理团队/a/dddda href#工作机会/a/dddda href#客户服务/a/dddda href#帮助/a/dd/dl/div/div/div
/body/html
CSS代码
* {margin: 0;padding: 0;
}.w {width: 1200px;margin: auto;
}body {background-color: #f3f5f7;
}li {list-style: none;
}a {text-decoration: none;
}/* 清除浮动带来的影响 */
.clearfix:before,
.clearfix:after {content: ;display: table;
}.clearfix:after {clear: both;
}.clearfix {*zoom: 1;
}.header {height: 42px;margin: 30px auto;
}.logo {float: left;width: 198px;height: 42px;
}.nav {float: left;margin-left: 60px;
}.nav ul li {float: left;margin: 0 15px;
}.nav ul li a {display: block;height: 42px;padding: 0 10px;line-height: 42px;font-size: 18px;color: #050505;
}.nav ul li a:hover {border-bottom: 2px solid #00a4ff;color: #00a4ff;
}.search {float: left;width: 412px;height: 42px;margin-left: 70px;
}.search input {/* input 和button都是行内块元素行内块元素间默认有缝隙 */float: left;width: 345px;height: 40px;border: 1px solid #00a4ff;border-right: none;color: #bfbfbf;font-size: 14px;padding-left: 15px;
}.search button {float: left;width: 50px;height: 42px;/* 按钮button默认有个边框需要手动去除 */border: 0;background-image: url(btn.png);
}.user {float: right;line-height: 42px;margin-right: 30px;font-size: 14px;color: #666;
}.banner {height: 421px;background-color: #1c036c;
}.banner .w {height: 421px;background: url(banner2.png) no-repeat top center;
}.subnav {float: left;width: 190px;height: 421px;background: rgba(0, 0, 0, 0.3);
}.subnav ul li {height: 45px;line-height: 45px;padding: 0 20px;
}.subnav ul li a {font-size: 14px;color: #fff;}.subnav ul li a span {float: right
}.subnav ul li a:hover {color: #00a4ff;
}.course {float: right;width: 230px;height: 300px;background-color: #fff;/* 浮动的盒子不会有外边距合并的问题 */margin-top: 50px;
}.course h2 {height: 42px;background-color: #9bceea;text-align: center;line-height: 42px;color: #fff;
}.bd {padding: 0 20px;
}.bd ul li {padding: 14px 0;border-bottom: 1px solid #ccc;
}.bd ul li h4 {font-size: 16px;color: #4e4e4e;
}.bd ul li p {font-size: 12px;color: #a5a5a5;
}.bd .more {display: block;height: 38px;border: 1px solid #00a4ff;margin-top: 5px;text-align: center;line-height: 38px;color: #00a4ff;font-size: 16px;font-weight: 700;
}/* 精品推荐模块 */
.goods {height: 60px;background-color: #fff;margin-top: 10px;box-shadow: 0 2px 3px 3px rgba(0, 0, 0, 0.1);/* 行高会被继承 */line-height: 60px;
}.goods h3 {float: left;margin-left: 30px;font-size: 16px;color: #00a4ff;
}.goods ul {float: left;margin-left: 30px;
}.goods ul li {float: left;
}.goods ul li a {padding: 0 30px;font-size: 16px;color: #050505;border-left: 1px solid #ccc;
}.mod {float: right;margin-right: 30px;font-size: 14px;color: #00a4ff;
}.box {margin-top: 30px;}.box-hd {height: 45px;
}.box-hd h3 {float: left;font-size: 20px;color: #494949;
}.box-hd a {float: right;font-size: 12px;color: #a5a5a5;margin-top: 10px;margin-right: 30px;
}.box-bd ul {width: 1225px;
}/* 让li的父亲.box-bd ul足够宽能够一行装下5个盒子则无需换行 */
.box ul li {float: left;width: 228px;height: 270px;margin-right: 15px;margin-bottom: 15px;
}.box-bd ul li img {width: 100%;
}.box-bd ul li h4 {margin: 20px 20px 20px 25px;font-size: 14px;color: #050505;font-weight: 400;
}.box-bd .info {margin: 0 20px 0 25px;font-size: 12px;color: #999;
}.box-bd .info span {color: #ff7c2d;
}.footer {height: 415px;background-color: #fff;
}.footer .w {padding-top: 35px;
}.copyright {float: left;
}.copyright p {font-size: 12px;color: #666;margin: 20px 0 15px 0;
}.copyright .app {width: 118px;height: 33px;border: 1px solid #00a4ff;text-align: center;line-height: 33px;color: #00a4ff;font-size: 16px;
}.links {float: right;
}.links dl {float: left;margin-left: 100px;
}.links dl dt {font-size: 16px;color: #333;margin-bottom: 5px;
}.links dl dd a {color: #333;font-size: 12px;
}
