HTML+CSS 编辑的（多列布局、相册、百度首页）、盒子模型

多列布局（浮动）

<html>
<title></title><head><link rel="stylesheet" href="css/2.css">
</head><body><div class="a1"><p class="z1">logo</p><p class="z2">某某摄影专辑</p><p class="z3">网站首页</p><p class="z3">咨询中心</p><p class="z3">产品展示</p><p class="z3">关于我们</p><p class="z3">联系我们</p></div><div class="a2"><img src="data:images/banner.jpg" width="1130px" height="300px"></div><div class="a4"><b class="z4">当前位置：首页>关于我们</b></div><hr width="1130px" color="#000" size="2px" style="float: left;margin-left: 10px;"><div class="a3"><img src="data:images/01.jpg" class="t1" align="left" width="300px" height="150px"><a style="font-size: 19px;">水墨（风格）摄影和传统的水墨画一样，现市面上出现的水墨摄影作品，按题材，可以分为风景和花鸟，对应国画中的山水画和花鸟画；按手法和意境，可以分为抽象和具象，对应国画中的写意和工笔。水墨风格的摄影照片虽然免不了使用Photoshop等软件的后期加工，但是这并不意味着可以任意扭曲原照片。全息摄影是指一种记录被摄物体反射波的振幅和位相等全部信息的新型摄影技术。普通摄影是记录物体面上的光强分布，它不能记录物体反射光的位相信息，因而失去了立体感。全息摄影采用激光作为照明光源，并将光源发出的光分为两束，一束直接射向感光片，另一束经被摄物的反射后再射向感光片。人眼直接去看这种感光的底片，只能看到像指纹一样的干涉条纹，但如果用激光去照射它，人眼透过底片就能看到原来被拍摄物体完全相同的三维立体像。一张全息摄影图片即使只剩下一小部分，依然可以重现全部景物。全息摄影可应用于工业上进行无损探伤，超声全息，全息显微镜，息摄影存储器,全息电影和电视等许多方面。</a></div>
</body></html>CSS代码.a1 {width: 260px;height: 600px;background-color: rgb(114, 116, 117);float: left;
}.a2 {width: 1130px;height: 300px;float: left;margin-left: 10px;margin-bottom: 10px;
}.a3 {width: 1130px;height: 250px;float: left;margin-left: 10px;
}.a4 {width: 1130px;height: 30px;float: left;
}.z1 {font-size: 100px;text-align: center;margin: 0;padding: 0;color: white;
}.z2 {text-align: center;margin: 0;padding: 0;color: white;margin-top: 10px;margin-bottom: 100px;
}.z3 {margin-left: 100px;font-weight: bold;
}.z4 {margin: 0;padding: 0;margin-left: 20px;font-weight: bold;
}

个人相册（清除浮动）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="css/3.css">
</head><body><div class="main"><div class="show_fenl clearfix"><ul><li class="no_mar"><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></div><div class="showpic clearfix"><ul><li><a href=""><img src="data:images/objpic07.jpg" /><span>摄影艺术</span></a></li><li><a href=""><img src="data:images/objpic02.jpg" /><span>摄影艺术</span></a></li><li><a href=""><img src="data:images/objpic03.jpg" /><span>摄影艺术</span></a></li><li><a href=""><img src="data:images/objpic04.jpg" /><span>摄影艺术</span></a></li><li><a href=""><img src="data:images/objpic05.jpg" /><span>摄影艺术</span></a></li><li><a href=""><img src="data:images/objpic06.jpg" /><span>摄影艺术</span></a></li><li><a href=""><img src="data:images/objpic01.jpg" /><span>摄影艺术</span></a></li><li><a href=""><img src="data:images/objpic08.jpg" /><span>摄影艺术</span></a></li><li><a href=""><img src="data:images/objpic09.jpg" /><span>摄影艺术</span></a></li></ul></div></div>
</body></html>CSS代码* {margin: 0;padding: 0;
}.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;
}.clearfix {display: inline-table;
}.clearfix {display: block;
}ul {list-style: none;overflow: hidden;margin: 0px;padding: 0px;
}a {color: #fff;text-decoration: none;
}img {border: none;
}.main {width: 96%;padding: 0 2%;
}.show_fenl .no_mar {margin-left: 0px;
}.show_right {width: 78%;
}.locat {font-size: 18px;margin: 40px 0px;padding-bottom: 30px;border-bottom: 1px solid #e1e1e1;
}.locat a,
.show_fenl a {color: #333;
}.locat a:hover {color: #5f6d7e;
}.show_fenl {text-align: right;
}.show_fenl ul li {float: left;background: #5f6d7e;margin: 10px;padding: 10px;
}.show_fenl ul li a {font-size: 16px;color: #fff;
}.show_fenl ul li a:hover {text-decoration: underline;
}.showpic {margin: 30px 0px;
}.showpic ul li {float: left;width: 32.4%;margin-right: 12px;margin-bottom: 12px;
}.showpic ul li img {width: 100%;height: 218px;
}.showpic ul li span {display: block;color: #333;text-align: center;background: #f1f1f1;padding: 10px 0px;
}.showpic ul li span:hover {background: #e1e1e1;
}

百度页面

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/1.css">
</head><body><div class="logo"><img src="data:images/bdlogo.gif" /></div><div class="nav"><a href="#">新 闻</a>&nbsp; <strong>网 页</strong>&nbsp;<a href="#"> 贴 吧</a> &nbsp;<a href="#">知 道</a> &nbsp;<a href="#">音 乐</a>&nbsp; <a href="#">图 片</a> &nbsp;<a href="#">视 频</a> &nbsp;<a href="#">地 图</a></div><br /><div class="sousou"><input type="text" class="search" />&nbsp;<input type="button" value="百度一下" class="btn" /></div><br /><br /><div class="more"><a href="#">百科</a>　<a href="#">文库</a>　<a href="#">hao123</a> | <a href="#">更多&gt;&gt;</a></div><br /><br /><div class="map"><img src="data:images/ic.jpg" />&nbsp;<a href="#">百度地图带你吃喝玩乐，全心全意为人民服务</a></div><br /><br /><div class="bottom"><a href="#">把百度设为主页</a>&nbsp;<a href="#">安装百度卫士</a><br /><a href="#">加入百度推广</a> | <a href="#">搜索风云榜</a> | <a href="#">关于百度</a> | <a href="#">About Baidu</a><br /> ©2013 Baidu 使用百度前必读 京ICP证030173号 </div>
</body></html>CSS代码
.logo{text-align:center;
}
.nav{font-size:14px; text-align:center;
}
.sousou{text-align:center;
}
.search{width:420px; height:23px;
}
.btn{height:30px; width:100px; font-size:14px;
}
.more{text-align:center; font-size:14px;
}
.map{text-align:center; font-size:12px;
}
.bottom{font-size:12px; text-align:center; line-height:30px;
}

盒子模型

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box {height: 800px;width: 600px;margin-top: 10px;border-color: beige;border-style: solid;}#over {height: 200px;width: 600px;background-color: green;margin-top: 10px;border-color: rgb(220, 234, 245);border-style: solid;}#throught {height: 400px;width: 600px;background-color: rgb(247, 20, 217);margin-top: 10px;border-color: rgb(220, 234, 245);border-style: solid;}#dibu {height: 200px;width: 600px;background-color: rgb(0, 128, 64);margin-top: 10px;border-color: rgb(220, 234, 245);border-style: solid;}</style>
</head><body><center><div title="box"><div id="over">头部</div><div id="throught">中部</div><div id="dibu">尾部</div></div></center>
</body></html>

HTML+CSS 编辑的（多列布局、相册、百度首页）、盒子模型相关推荐

金典 DIV+CSS 3行2列布局详解--企业网站通用的基本布局详解
我们遇到过很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等.这样的形式是国内经典式的布局,我们这里不对 ...
CSS 垂直居中、多列布局
阅读目录垂直居中基本实现思路单列布局示例网站两列布局示例网站两列布局的实现第 1 步,写好 HTML 结构.这里为了查看方便,我们为布局容器设置背景颜色和高度. 第 2 步,将布局容器 ...
css中的伪元素、基线对齐、盒子模型
目录一.伪元素二.基线对齐三.盒子模型 1.外边距margin 2.边框(border) 一.伪元素说明:伪类元素使用两个冒号(::)而不是一个冒号,目的是为区分伪类和伪元素,大多数浏览器都支 ...
【CSS】课程网站网页底部开发 ( 网页底部盒子模型测量及样式 | 代码示例 )
文章目录一.网页底部盒子模型测量及样式 1.盒子布局说明 2.底部的大盒子测量及样式 3.版心盒子 4.版权盒子 5.链接盒子二.代码示例 1.HTML 标签结构 2.CSS 样式 3.显示效果 ...
CSS基础知识（颜色、伪类、盒子模型）
6.设置颜色单位 L 普通英文单词 {color : 属性值red;} 此方法简单,便捷.但设置的颜色在不同浏览器中,可能显示的颜色出现差异 * 三原色 - 红.绿.蓝 L 颜色的八进制方式 ...
div+css经典三行两列布局
写在前面在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说positio ...
CSS 自动居中一列布局
(1)三个技能点: ①标准文档流 ②块级元素 ③margin属性(实现网页自动居中布局的关键) 2.居中设置:margin:0 auto; (1)auto:会根据浏览器的宽度自动的设置两边的外边距 ( ...
css基础伪类选择器与选择器权重以及盒子模型的用法演示
1. 伪类选择器根据元素的位置或状态来匹配子元素 1.1 结构伪类与上下文选择器很相似后文演示所用 HTML 代码如下: <!DOCTYPE html> <html lang= ...
《css设计彻底研究》读书笔记之　盒子模型
一.在给元素设置背景时 IE作用域:content + padding Firefox作用域:content + padding + border 二.border border-color : re ...
html三列布局中间固定,常见的三列布局（左右固定宽度，中间自适应）
实现css中的三列布局,左右固定宽度,中间自适应.三列布局方式的关键是怎么样才能使得在伸缩浏览器窗口的时候让中间的子元素宽度改变.比较常见的实现方案是:定位,浮动,css3中新特性flex布局,以及流 ...

HTML+CSS 编辑的（多列布局、相册、百度首页）、盒子模型

HTML+CSS 编辑的（多列布局、相册、百度首页）、盒子模型相关推荐

最新文章

热门文章