CSS之盒子模型及常见布局
盒子模型的综合应用
CSS提高1
Div ul li 的综合应用很多的网页布局现在都用到这种模式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>homework2.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" href="homework2.css" type="text/css"></link>
</head>
<body>
<div class="div1">
this is the test;
<ul class="faceul">
<li><img src="images/mxlyf3.jpg"><a href="#">刘亦菲</a></li>
<li><img src="images/mxlyf3.jpg"><a href="#">刘亦菲</a></li>
<li><img src="images/mxlyf3.jpg"><a href="#">刘亦菲</a></li>
<li><img src="images/mxlyf3.jpg"><a href="#">刘亦菲</a></li>
<li><img src="images/mxlyf3.jpg"><a href="#">刘亦菲</a></li>
<li><img src="images/mxlyf3.jpg"><a href="#">刘亦菲</a></li>
<li><img src="images/mxlyf3.jpg"><a href="#">刘亦菲</a></li>
<li><img src="images/mxlyf3.jpg"><a href="#">刘亦菲</a></li>
</ul>
</div>
</body>
</html>
CSS 代码：
@CHARSET "UTF-8";
/*将body的样式清空*/
body{
margin:0px;
padding:0px;
}
/*设计div的位置*/
.div1{
width:500px;
height:300px;
border: 1px solid black;
margin-left: 100px;
margin-top: 50px;
}
/* 设计图片区域的位置大小*/
.faceul{
width: 450px;
height: 250px;
border: 1px solid green;
margin-top: 25px;
margin-left: 25px;
list-style-type: none;
}
/*用于控制单个图片区域的大小*/
.faceul li {
width: 75px;
height: 85px;
border: 1px solid red;
float: left; /*左浮动*/
margin-left: 5px;
margin-top: 5px;
}
/*控制文字*/
.faceul li a {
margin-left: 10px;
}
a:LINK{
text-decoration: none;
color: blue;
}
a:HOVER{
text-decoration: underline;
color: red;
}
/*控制图片大小和位置*/
.faceul li img{
width:65px;
height:65px;
margin-left: 5px;
margin-top: 5px;
}
CSS提高2
设计优酷的其中一个模块
Html 代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>homework3.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" href="homework3.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/mxlyf3.jpg"></br><a href="#">张三</a></li>
<li ><img src="images/mxlyf3.jpg"></br><a href="#">李四</a></li>
<li ><img src="images/mxlyf3.jpg"></br><a href="#">王五</a></li>
</ul>
</div>
<div>
<span class="span1"><font class="font1">网站达人</font><a href="#">更多牛人</a></span>
<ul class="faceul">
<li ><img src="images/mxlyf3.jpg"></br><a href="#">张三</a></li>
<li ><img src="images/mxlyf3.jpg"></br><a href="#">李四</a></li>
<li ><img src="images/mxlyf3.jpg"></br><a href="#">王五</a></li>
</ul>
</div>
<div>
<span class="span1"><font class="font1">设计大牛</font><a href="#">更多牛人</a></span>
<ul class="faceul">
<li ><img src="images/mxlyf3.jpg"></br><a href="#">张三</a></li>
<li ><img src="images/mxlyf3.jpg"></br><a href="#">李四</a></li>
<li ><img src="images/mxlyf3.jpg"></br><a href="#">王五</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS 代码：
@CHARSET "UTF-8";
body{
margin:0 auto;
width:1000px;
border:1px solid red;
padding: 0px;
}
/*定义常用的字体*/
.font1{
font-weight: bold;
font-size: 20px;
margin-left: 5px;
}
/*控制外层的div*/
.div1{
margin-left: 100px;
margin-top: 100px;
width: 500px;
height: 250px;
border: 1px solid black;
}
/*定义span*/
.span1{
/*background: orange;*/
display: block;
}
.span1 a {
margin-left: 330px;
font-weight: bold;
}
.faceul{
margin-left:0px;
width: 500px;
height: 50px;
/* background: green; */
list-style-type: none;
}
.faceul li {
float: left;
width: 65px;
height: 80px;
margin-left: 70px;
/* background-color: pink; */
text-align: center; /*表示放在该元素的其他元素被左右居中*/
}
.faceul li img{
width: 60px;
height: 60px;
margin-left: 2px;
margin-top: 2px
}
/*定义超链接的样式*/
a:LINK {
text-decoration: none;
}
CSS之盒子模型及常见布局的更多相关文章
- 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）
这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...
- [CSS属性设置，盒子模型，网页布局]
[CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...
- #CSS的盒子模型、元素类型
CSS的盒子模型.元素类型 本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...
- 深入理解CSS系列（一）：理解CSS的盒子模型
接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...
- 使用css弹性盒子模型
提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...
- 深入了解CSS中盒子模型
CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...
- CSS 弹性盒子模型
CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...
- CSS基础之盒子模型及浮动布局
盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们日常生活中的盒子( ...
- CSS盒子模型与双飞翼布局
盒子模型&双飞翼实现 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin).边框(border).内边距(padding).实际内容(content)四个属性. ...
随机推荐
- wxpython更新
.configure时候检查不到gtk+ 使用 apt-get install gnome-core-devel
- (转)实例分析：MySQL优化经验
[IT专家网独家]同时在线访问量继续增大,对于1G内存的服务器明显感觉到吃力,严重时甚至每天都会死机,或者时不时的服务器卡一下,这个问题曾经困扰了我半个多月.MySQL使用是很具伸缩性的算法,因此你通 ...
- python 字符串与数字之间的转换
1.数字转字符串 i = 123 str = ‘%d’ %i str即为转换成的字符串 2.字符串转换成数字: import string tt='555' ts=string.atoi(tt) ts ...
- ThinkPHP 3.2.3 自动加载公共函数文件的方法
方法一.加载默认的公共函数文件 在 ThinkPHP 3.2.3 中,默认的公共函数文件位于公共模块 ./Application/Common 下,访问所有的模块之前都会首先加载公共模块下面的配置文件 ...
- Yii源码阅读笔记（二十四）
Module类中获取子模块,注册子模块,实例化控制器,根据路由运行指定控制器方法的注释: /** * Retrieves the child module of the specified ID. * ...
- 一步一步来做WebQQ机器人-(四)(获取好友列表和群列表)
× 本篇主要是: 获取好友列表,群列表 我会尽量详细一点,尽我所知的分享一些可能大家已经掌握的或者还不清楚的经验 利于大家阅读,文章样式不再复杂化,根据内容取固定色 目前总进度大概65% 全系列预计会 ...
- JQuery-事件(部分)
/* 1. bind跟on是类似的方法,下面示例可相互替换 $('#click1').on('click',toYellow); // click绑定toYellow方法 $('#click1').o ...
- (转)python爬取拉勾网信息
学习Python也有一段时间了,各种理论知识大体上也算略知一二了,今天就进入实战演练:通过Python来编写一个拉勾网薪资调查的小爬虫. 第一步:分析网站的请求过程 我们在查看拉勾网上的招聘信息的时候 ...
- iOS图片压缩处理
理解概念 首先,我们必须明确图片的压缩其实是两个概念: “压” 是指文件体积变小,但是像素数不变,长宽尺寸不变,那么质量可能下降. “缩” 是指文件的尺寸变小,也就是像素数减少,而长宽尺寸变小,文件体 ...
- WPF部署问题 解决：The application requires that the assembly...be installed in the GAC
vs-->引用-->找到问题类库-->邮件属性--->特定版本-->false done