原创 HTML5+CSS3 学习笔记 08

原创 HTML5+CSS3 学习笔记 08

视频资源：​​-> 快速导出为PNG方式2：选中需要的图层，图层菜单->合并图层(ctrl+E); 右击 -> 快速导出为PNG

第二类：切片切图

文件菜单 -> 导出 ->存储为web设备所用格式 -> 选择需要的图片格式 -> 存储

第三类：PS插件切图等。

Cutterman (cutterman.cn/zh/cutterman)

CSS属性书写顺序

页面布局整体思路

头部制作

小练习

index.html

• 首页
• 课程
• 职业规划

Jim and Kate

this is a good world!

下载APP

关于我们

关于

管理团队

工作机会

客户服务

帮助

关于我们

关于

管理团队

工作机会

客户服务

帮助

关于我们

关于

管理团队

工作机会

客户服务

帮助

style.css

* { margin: 0; padding: 0;}/* 版心是1200像素，每个版心都水平居中对齐，定义版心公共类 */.w { width: 1200px; margin: auto;}body { background-color: #f3f5f7; /*灰色背景*/ /* height: 3000px; */}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; /* background-color: pink; */ margin: 30px auto; /*auto 会层叠.w中的margin*/}.logo { float: left; /*一行元素全部需要浮动，否则浮动失效。*/ width: 198px; height: 42px; /* background-color: purple; */}.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;; /*鼠标指向链接时文字与边框一个颜色*/}/* serch，模块 */.search { float: left; width: 412px; height: 42px; background-color: skyblue; margin-left: 70px;}.search input { float: left; width: 345px; /*345 + 15 = 360*/ height: 40px; border: 1px solid 00aa4ff; border-right: 0; /*消除右边框*/ color: #bfbfbf; font-size: 14px; padding-left: 15px; /*会撑大盒子宽度*/}.search button { float: left; width: 50px; height: 42px; background-color: blue; border: 0; /* 按钮默认有边框，需要手动去除 */ background: url(images/btn.png); /*不是buttton中添加img并指定src*/}.user { float: right; line-height: 42px; margin-right: 30px; font-size: 14px; color: #666;}/* banner区域 */.banner { height: 421px; background-color: #1c036c;}.banner .w { height: 421px; background: url(images/banner1.png) no-repeat top center; /*重点*/}.subnav { float: left; width: 190px; height: 421px; background: rgba(0, 0, 0, .3); /*黑色半透明*/}.subnav ul li { /*重点*/ height: 45px; line-height: 45px; padding: 0 20px;}.subnav ul li a { /*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: 320px; background-color: #fff; margin-top: 50px; /*浮动的盒子不会有外边距合并的问题*/}.course h2 { height: 48px; background-color: #9bceea; text-align: center; /*水平居中*/ line-height: 48px; /*垂直居中*/ font-size: 18px; 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; text-align: center; line-height: 38px; color: #000; font-size: 16px; font-weight: 700; margin: 5px;}/* 精品推荐模块 */.goods { height: 60px; background-color: #fff; box-shadow: 0 2px 3px rgba(0, 0, 0, .1); /*阴影*/ margin-top: 10px; line-height: 60px; /*孩子会继承行高，h3, ul, mode都不用设置行高*/}.goods h3 { float: left; margin-left: 30px; font-size: 16px; color: #00a4ff}.goods ul { float: left; margin-left: 30px;}.goods ul li a { padding: 0 30px; font-size: 16px; color: #050505; border-left: 1px solid #ccc; /*左框*/}.goods ul li { float: left;}.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问题*/ margin-right: 30px;}/* 将li的父亲ul修改的足够宽，足够一行装5个盒子就不会换行啦 （230 + 15） * 5 = 1225 */.box-bd ul { width: 1225px;}.box-bd ul li { float: left; width: 228px; height: 270px; background-color: #fff; margin-right: 15px; margin-bottom: 15px;}.box-bd ul li img { width: 100%; /*和父亲一样宽，及时图片超出228px，也不会凸出来*/}.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: #999999;}.box-bd .info span { color: #ff7c2d;}.footer { height: 415px; background-color: #fff;}.footer .w { /*外边距合并*/ /*margin-top: 35px;*/ padding-top: 35px;}.copyright { float: left;}.copyright p { font-size: 12px; color: #666; margin: 20px 0 15px 0;}.copyright .app { display: block; /*转换为行内元素*/ 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 { font-size: 12px; color: #333;}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。