html+css+js系列之四 css的盒子模型
2014-11-17 11:50
525 查看
参考: 韩顺平 轻松搞定网页设计
1. 边框和外边距设置
效果图
tstBox1.html
对应的testBox1.css
2.图片布局整齐初级
效果图
box2.html
box2.css
3.图片布局整齐中级
效果图:
box3.html
对应的box3.css
1. 边框和外边距设置
效果图
tstBox1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>testBox.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <link rel="stylesheet" href="textBox1.css" type="text/css"></link></head> <body> <div class = "s1"> <img src="images/0.jpg"> </div> </html>
对应的testBox1.css
Body{ margin: 0 auto;/*让body在浏览器显示的时候,上下不留空,左右居中自适应*/ border: 1px solid ; border-top-color: red; height:1500px; width:1800px; } .s1{ border: 1px solid blue;/*每个边框有 3 个方面:宽度、样式,以及颜色*/ height:300px; width:400px; margin-left: 100px; margin-top: 10px; } .s1 img{ margin-left: 30px;/*以左上角为原点*/ margin-top: 10px; }
2.图片布局整齐初级
效果图
box2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>box2.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="./box2.css"> </head> <body> <div class = "div1"> <ul class = "faceul"> <li> <img alt="" src="images/0.jpg"> <a href="#">小龙女</a></li> <li> <img alt="" src="images/0.jpg"> </li> <li> <img alt="" src="images/0.jpg"> </li> <li> <img alt="" src="images/0.jpg"> </li> <li> <img alt="" src="images/0.jpg"> </li> <li> <img alt="" src="images/0.jpg"> </li> </ul> </div> </body> </html>
box2.css
body{ margin: 0px; padding:0px;/*浏览器显示左上清空*/ } /*div1 用于控制显示的位置*/ .div1{ width: 2500px; height: 1000px; border:1px solid #b4b4b4; margin-left:100px; margin-top:20px; } /*faceul用于控制显示图片区域的宽度*/ .faceul{ width:2000px; height: 800px; border:1px solid red; list-style-type: none; margin: 0px; padding:0px; } /*用于控制单个图片区域的大小*/ .faceul li{ width:300px; height:300px; border:1px solid blue; float:left; margin-left: 15px; margin-top: 15px; } .faceul a{ width:400px; height:5px; margin-left: 5px; margin-top: 5px; } a:link{ text-decoration: none; color:black; } a:hover{ text-decoration: none; color:red; } .faceul img{ width:280px; height:250px; margin-left: 5px; margin-top: 5px; }
3.图片布局整齐中级
效果图:
box3.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>box3.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <link rel="stylesheet" href="box3.css" type="text/css"></link></head> <body> <div class = "div1"> <div> <span class = "span1"><font class = "font1">优酷牛人</font> <a href ="#" >更多牛人</a></span> <ul class = "faceul"> <li> <img src="images/0.jpg"><span>MichaeInii</span> <img src="images/1.jpg" ></li> <li> <img src="images/0.jpg"><span>小演矿</span> <img src="images/1.jpg"> </li> <li> <img src="images/0.jpg"><span>道听途说</span> <img src="images/1.jpg" ></li> </ul> </div> <div> <span class = "span1"><font class = "font1 ">明星空间</font><a href ="#" >更多空间</a></span> <ul class = "faceul"> <li> <img src="images/0.jpg"><span>爱心月</span> <img src="images/1.jpg" ></li> <li> <img src="images/0.jpg"><span>【城堡】</span> <img src="images/1.jpg" > </li> <li> <img src="images/0.jpg"><span>卢正雨</span> <img src="images/1.jpg" ></li> </ul> </div> <div> <span class = "span1"><font class = "font1">优酷公益</font><a href ="#" >更多公益官网</a></span> <ul class = "faceul1"> <li> <img src="images/0.jpg"><span>扶贫基金会</span></li> <li> <img src="images/0.jpg"><span>李冰冰LOVE</span> </li> <li> <img src="images/0.jpg"><span>生态中国</span> </li> </ul> </div> </div> </body> </html>
对应的box3.css
/*body在各个浏览器显示时,左上角都有不同程度的空隙,若想统一样式,需要定制*/ body{ margin: 0px auto;/*自动居中*/ height: 1400px; width: 1200px; border:1px solid blue; } /*本例中,把所有的显示内容全部先用一个div包起来,方便显示。*/ .div1{ height: 1380px; width: 1180px; border:1px solid gray;/*设置border边界的宽度样式和颜色 */ } /*定义几个常用的字体*/ .font1{ font-weight: bold; font-size: 20px; margin:2px 0 0 2px; } /*如果需要,可以定义几种超链接的样式,本例中就一切从简了.超链接不需要再定义类选择器,它专属的样式有a:link、a:hover、a:visited*/ a:link{ text-decoration: none;/*设置链接无下划线*/ } .span1{ /*background-color: pink;*/ display: block; } .span1 a{ margin-left:950px; } .faceul { list-style-type: none; border:1px solid green; height: 450px; width: 1150px; padding:0px; /*background-color: green;*/ } .faceul li{ border:1px solid #b4b4b4; height: 400px; width: 320px; margin-top: 5px; margin-left: 5px; float:left;/*左浮动,本来ul li无序列表显示的图片是纵向的,这样一左浮动,变成横向拓展了*/ margin:25px; /*background-color: red; text-align: center;*/ } .faceul image{ margin-top: 5px; margin-left: 5px; height: 350px; width: 250px; } /*由于要显示的效果,分了三个div,前两个div区域中,每个li对应的图片下,不仅有文字还有图片, *而最下面的一个div里面每个li中没有图片,和上面链各个div不一样,所以单独拿出来设置样式, *和前面的faceul的主要区别就是边框的高度修改了 */ .faceul1 { list-style-type: none; border:1px solid green; height: 300px; width: 1150px; padding:0; /*background-color: green;*/ } .faceul1 li{ border:1px solid #b4b4b4; height: 270px; width: 320px; margin-top: 5px; margin-left: 5px; float:left;/*左浮动*/ margin:25px; /*background-color: red;*/ text-align: center;/*文字居中显示*/ } .faceul1 image{ margin-top: 5px; margin-left: 5px; height: 300px; width: 250px; }
相关文章推荐
- HTML和CSS的关键:盒子模型(Box model)
- html+css+js系列之二 html中的利用表格布局
- HTML+CSS基础课程之盒子模型
- [HTML/CSS]盒子模型,块级元素和行内元素
- 【CSS】CSS详细介绍:(HTML/CSS结合方式、CSS代码格式、选择器、盒子模型)
- HTML和CSS的盒子模型(Box model)
- HTML/CSS/Js/Jquery/PHP网站0基础开发到大神系列【飞鸽学院】
- HTML+CSS之盒子模型
- [HTML/CSS]盒子模型,块级元素和行内元素
- [HTML/CSS]盒子模型,块级元素和行内元素
- [HTML/CSS]盒子模型,块级元素和行内元素
- html+css的高级盒子模型
- HTML和CSS的关键:盒子模型(Box model)
- CSS入门系列(五)CSS的盒子模型
- HTML和CSS的关键:盒子模型(Box model)
- html+css+js系列之一 html的框架frameset
- CSS系列:CSS中盒子模型
- HTML+CSS入门到精通一 盒子模型
- [js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法
- html+css的高级盒子模型