11.06笔记整理、作业以及学习心得
2017-11-06 23:58
239 查看
11.06课堂笔记及作业
1、盒子模型内外边距和边框介绍
当浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四个部分组成：1. Margin
2. Border
3. Padding
4. Content
1.1 边框
用border属性给元素四周指定统一的边框。在属性值中指定边框的宽度（通常是以显示到屏幕上的像素为单位）、样式、颜色。样式包括：solid（实线）、dotted（虚线）、dashed（虚线）、double（双实线）、inset、outset、ridge、groove 。
也可以通过设置样式为none或者hidden来移除边框。
如果一次只指定某个方向的边框，就用属性：
border-top border-right border-bottom border-left
1.2 外边距和内边距
用margin属性和padding属性分别设置外边距和内边距的宽度。如果指定一个宽度，他将会作用于元素四周（按照顺时针方向：上、右、下、左）
如果指定两个宽度，第一个宽度会作用在顶部和底部，第二个宽度作用于右边和左边
也可以指定四个宽度
1.3 简写属性
h1{margin:10px 10px 10px 10px}
- 上下边框属性 左右边框属性
- 上边框属性 左右边框属性 下边框属性
- 上 右 下 左边框属性1.4 行内元素的盒子模型
行内元素的盒子模型只能得到一行高度的空间，行高由line-height属性决定，没有设置该属性则为内容默认高度。所以不推荐对行内元素设置盒子属性，会影响其他元素以及页面布局。一般先用display属性设置内联元素为块级元素显示，再设置盒子属性。2 display属性
2.1 元素的显示和隐藏
使用display：none将元素隐藏起来，此时元素不占用页面空间使用visibility-hidden也可以隐藏元素，此时元素占用空间。
2.2 通过display改变内联元素或块级元素
（1）display：block就是将元素显示为块级元素block元素的特点是：
总是在新行上开始
高度，行高以及顶和底边距都可控制
宽度默认是它的容器的100%，除非设定一个宽度
<div>,<p>,<h1>,<form>,<ul>和<li>都是块级元素的例子。
（2）display：inline就是将元素显示为行内元素
inline元素的特点是：
- 和其他元素都在一行上
- 高，行高及顶和底外边距不可改变
- 宽度就是它的文字或图片的宽度，不可改变
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
（3）display：online-block
display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
3、position属性
CSS有三种基本的定位机制：普通流、浮动和绝对定位3.1 static静态定位
HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到top,bottom,right,left属性的影响3.2 fixed固定定位
脱离标准流，在页面中不占位置 。不管页面有多大，永远相对于浏览器的边框来定位 。3.3 relative相对定位
不脱离标准流，在页面中占位置 。相对于自己原来的位置来进行定位 。3.4absolute绝对定位
脱离标准流，在页面中不占位置（浮起来）。如果没有父元素，则相对于body定位；如果有父元素，但父元素没有定位，那么还是相对于body定位；如果父元素有定位，那么相对于父元素来定位。3.5定位元素的重叠
z-index属性控制定位元素的重叠顺序，属性值是z轴上的值。Z-index只能在绝对定位元素上奏效（position:absolute）。
Z-index的值是设置一个定位元素沿Z轴的位置，其值越大，离用户越近，所以若两个定位元素，Z-index值越大的将会覆盖值越小的定位元素。默认值是0，可以是正负数。
11.06作业
1、百度网页的临摹
（1）html部分<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"> <title> 百度一下，你就知道 </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <link type="text/css" rel="stylesheet" href="./css/baidu.css"></link> </head> <body> <div class="index"> <div class="head"> <div class="ul"> <ul class="ul"> <li><a href="http://www.baidu.com/more/">更多产品</a></li> <li><a href="http://www.baidu.com/gaoji/preferences.html">设置</a></li> <li><a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F">登录</a></li> <li><a href="http://tieba.baidu.com"><b>贴吧</b></a></li> <li><a href="http://xueshu.baidu.com"><b>学术</b></a></li> <li><a href="http://v.baidu.com"><b>视频</b></a></li> <li><a href="http://map.baidu.com"><b>地图</b></a></li> <li><a href="http://www.hao123.com"><b>好123</b></a></li> <li><a href="http://news.baidu.com"><b>新闻</b></a></li> <div class="clear"></div> </ul> </div> </div> <div class="img"> <img src="./img/c1.png"> </div> <div class="s-form"> <div id="s-form"> <form id="search" name="www.baidu.com" action="GET"> <span class="s-form-left"> <input id="input" type="text" name="f" value maxlength="255"> <span class="s-form-middle"> <img src="./img/c4.png"> </span> <div class="clear"></div> </span> <span class="s-form-right"> <input id="sou" type="submit" value="百度一下" > </span> <div class="clear"></div> </form> </div> </div> <div class="qrcodeCon"> <div class="qrcode"> <div> <img src="./img/c2.png"> </div> <div class="qrcode-text"> <p><b>手机百度</b></p> </div> </div> </div> <div class="div-bottom"> <div id="p-bottom"> <p class="p-bottom"> <a href="">把百度设为首页</a> <a id="p-id" href="">关于百度</a></li> <a id="p-id" href="">About Baidu</a> <a id="p-id" href="">百度推广</a> </p> <p class="p-bottom"> @2017 Baidu <a href="">使用百度前必读</a> <a href="">意见反馈</a> 京ICP证030173号 <a id="p-id" href="">京公网安备11000002000001号</a> </p> </div> </div> </div> </body> </html>
（2）CSS部分
.head{
}
.ul{
list-style-type:none;
margin:0;
padding:0;
}
.ul a{
display:block;
float:right;
padding:10px 10px;
color:#333;
}
.ul a:hover{
color:blue;
}
.clear{
clear:both;
}
.img{
margin<
fc29
/span>:0 auto;
text-align:center;
}
.s-form{
/*border:2px solid red;*/
}
#s-form{
margin:auto auto;
width:671px;
height:37px;
}
#search{
/*border:2px solid blue;*/
margin:0 auto;
width:642px;
height:37px;
}
#search span{
display:block;
/*float:left;
margin:auto auto;*/
}
.s-form-left{
border:1px solid #6c6c6c;
float:left;
width:540px;
height:36px;
}
.s-form-middle{
/*display:block;*/
float:right;
margin-top:8px;
margin-right:0;
}
.s-form-right{
width:100px;
height:38px;
float:right;
}
#input{
width:500px;
height:22px;
margin-top:4px;
margin-left:5px;
border:none;
display:block;
float:left;
}
#sou{
background-color:#6a6aff;
border:none;
border-bottom:1px;
width:100px;
height:37px;
color:#ffffff;
/*display:block;*/
width:100px;
height:38px;
}
.qrcode{
margin-top:200px;
}
.qrcode div{
text-align:center;
}
#p-bottom{
margin:0;
padding:0;
}
.p-bottom{
text-align:center;
color:#8e8e8e;
display:block;
line-height:22px;
margin:0;
padding:0;
font-size:14px;
}
.p-bottom a{
color:#8e8e8e;
font-size:14px;
}
#p-id{
display:online-block;
margin-left:25px;
}2、尝试给CODING COFFEE加一波页面广告。（使用固定定位）
（1）html部分<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Coding Coffee</title> <link type="text/css" rel="stylesheet" href="./css/shop.css"> </link> </head> <body> <ul class="navigator"> <li><a href="./html/list.html">产品列表</a></li> <li><a href="./html/shoplist.html">分店列表</a></li> <li><a href="./html/Join Us.html">欢迎加入我们</a></li> <li><a href="./html/order.html">网上预订</a></li> <div class="clear"></div> </ul> <div class="ad"> <img src="./img/c10.jpg"> </div> <div id="ad"> <img src="./img/c11.jpg"> </div> <div class="index"> <h1 style="color:blue">欢迎光临Coding Coffee</h1> <img src="./img/c1.jpg"> <p>敬请<span>关注</span>我们定期的<a href="./html/list.html">产品列表</a>，<br> <b>Coding Coffee</b>是一家只对<strong>程序员</strong>开放的<em>互联网咖啡馆</em>。 </p> <p> 请关注我们的<a href="./html/shoplist.html">分店列表</a>! </p> <p>网络招聘：<a href="./html/Join Us.html">欢迎加入我们！</a></p> <p><a href="./html/order.html">网上预定</a></p> </div> </body> </html>
（2）CSS部分
h1{
color:yellow;font-size:60px;
/*
border:3px;
border-style:solid;
border-color:red;
*/
margin:30px;
padding:50px;
}
.navigator{
list-style-type:none;
background-color:#333;
margin:0px;
padding:0px;
}
.navigator li a{
display:block;
float:left;
padding:18px 18px;
text-decoration:none;
color:white;
}
li a:hover{
background-color:#ccc;
}
.clear{
clear:both;
}
.ad{
position:fixed;
left:50px;
top:100px;
}
#ad{
position:fixed;
right:50px;
top:100px;
}
div{
text-align:center;
}
body{
background-image:url('../img/c3.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center center;
background-size:100% 100%;
/*background-color:#cccccc;*/
}
.index a:link{color:green;text-decoration:none;}
.index a:visited{color:red;text-decoration:none}
.index a:hover{color:yellow;text-decoration:underline;}
.index a:active{color:blue;text-decoration:underline;}3、学习心得
今天学习了盒子模型的边距和边框以及display属性，详细讲解了浮动和清除浮动，用position属性对元素进行设置定位类型，了解了四种position的属性值：static、fixed、relative、absolute。自己尝试临摹百度网页，尝试不同的页面设计技巧，加强知识记忆，增强动手能力！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 11.10笔记整理、作业和学习心得
- 11.13课堂笔记、作业以及学习心得
- 11.09课堂笔记、作业以及学习心得
- 11.07笔记整理、作业及学习心得
- 11.20课堂笔记、作业以及学习心得
- #11.21课堂笔记、作业以及学习心得
- 12.13课堂笔记、课后作业、学习心得
- 11月7号笔记 代码练习以及学习心得
- 韩顺平_php从入门到精通_视频教程_第17讲_div-css作业评讲③_学习笔记_源代码图解_PPT文档整理
- JAVA基础学习精简心得笔记整理
- 韩顺平_php从入门到精通_视频教程_第14讲_盒子模型经典应用②_作业布置_学习笔记_源代码图解_PPT文档整理
- 韩顺平PHP学习视频笔记整理004html基本操作续--课后作业
- DeepLearning (六) 学习笔记整理：神经网络以及卷积神经网络
- 学习笔记整理——用户，属组以及密码相关
- 深度学习第二课 改善深层神经网络：超参数调试、正则化以及优化 第三周超参数调试+Batch normalization笔记和作业
- 大前端学习笔记整理【三】行内元素与块级元素的区别以及绝对定位与固定定位的差异
- 韩顺平_php从入门到精通_视频教程_第15讲_di-css作业评讲①_学习笔记_源代码图解_PPT文档整理
- 韩顺平_php从入门到精通_视频教程_第16讲_div-css作业评讲②_学习笔记_源代码图解_PPT文档整理
- 学习笔记心得&作业
- 有关c#的学习笔记整理与心得