盒子模型的综合应用

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之盒子模型及常见布局的更多相关文章

  1. 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）

    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...

  2. [CSS属性设置，盒子模型，网页布局]

    [CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...

  3. #CSS的盒子模型、元素类型

    CSS的盒子模型.元素类型   本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...

  4. 深入理解CSS系列（一）：理解CSS的盒子模型

    接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...

  5. 使用css弹性盒子模型

    提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...

  6. 深入了解CSS中盒子模型

    CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...

  7. CSS 弹性盒子模型

    CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...

  8. CSS基础之盒子模型及浮动布局

    盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们日常生活中的盒子( ...

  9. CSS盒子模型与双飞翼布局

    盒子模型&双飞翼实现 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin).边框(border).内边距(padding).实际内容(content)四个属性. ...

随机推荐

  1. windows自带的压缩，解压缩命令

    压缩一个文件: makecab c:\ls.exe ls.zip 解压一个文件: expand c:\ls.zip c:\ls.exe

  2. Spring的特点

    创始人:Rod Johson1.特点: a:方便解耦和,简化开发,提升性能 b:AOP面向切面的编程 c:声明式事务支持 d:方便程序的调式 e:方便集成各大优秀的框架 f:java源代码学习的典范 ...

  3. document获取节点byId&byName

    <script type="text/javascript"> /* *需要:获取页面中的DIV节点: *思路: *通过docment对象完成.因为div节点有ID属性 ...

  4. Empire C：Basic 3

    首先我们定义一个表示年龄的指针: int* page: 这就是定义了一个指针,和定义普通变量就多了一个*符号而已. 为什么变量名用了p开头,这里引用了英文pointer(指向),表示它是一个指针,而非 ...

  5. Flink - state

      public class StreamTaskState implements Serializable, Closeable { private static final long serial ...

  6. apk反编译、smali修改、回编译笔记

    最近下了一个apk程序,但是一启动会弹出一个流氓广告.这个广告不是原厂商加的,而是有人在原有apk程序的基础上,加了一个壳,让apk先启动他加的广告,再启动原来的程序,很恶心.于是想去掉它. 试了几个 ...

  7. Sublime Text3 常用快捷键

    1. 更改变量名的几种方法 a.选中变量,ctrl+d 一个个选择 b.选中变量,alt+F3   2.查找打开过的文件:Ctrl+P,然后输入最近的文件名就可以即时预览到文件内容. 3.ctrl+r ...

  8. transform的用法和注意事项

    1.作用: 1)transform可以控制平移.比例缩放和旋转. 2)transform中的方法主要分为两种:带make和不带make的方法. 3)带make的方法主要是基于控件最初的状态进行改变,所 ...

  9. jquery on()方法绑定多个选择器,多个事件

    on(events,[selector],[data],fn) •events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myP ...

  10. MyBatis操作指南-配置结果映射一对一，一对多，多对多（基于注解）