盒子模型的综合应用

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. 将文件系统数据库迁移到ASM中

    使用裸设备配置ASM实例 http://www.cnblogs.com/myrunning/p/4270849.html 1.查看我们创建的磁盘组 [oracle@std ~]$ export ORA ...

  2. python 语料处理（从文件夹中读取文件夹中文件，分词，去停用词，去单个字）

    # -*- coding:utf8 -*- import os import jieba def splitSentence(inputFile): fin = open(inputFile, 'r' ...

  3. C++产生随机数四则运算

    产生两位随机整数,随机四则运算符,生成30道运算题. 一.编程思路 看到要求,首先想到的是怎么运用随机数,因为自己对随机数的不熟练所以还要在查很多东西.在一个for循环内先产生两个30以内的随机数,在 ...

  4. 【iCore3 双核心板_FPGA】例程十二：Modelsim仿真实验

    实验指导书及代码包下载: http://pan.baidu.com/s/1bnQEldl iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  5. C语言输入多组问题~ungetc回退字符到stdin

    题目描述 输入数组长度 n 输入数组      a[1...n] 输入查找个数m 输入查找数字b[1...m]   输出 YES or NO  查找有则YES 否则NO . 输入描述: 输入有多组数据 ...

  6. 对蓝牙profile的理解

    蓝牙profile协议概览.pdf 之所以把Profile翻译为配置文件,是为避免和JavaME中的简表混淆.配置文件也是蓝牙 SIG官方网站给出的标准翻译. 想要使用蓝牙无线技术,设备必须能够翻译特 ...

  7. ASP.NET 访问路径 错误提示 HTTP 错误 404.8 原来路径中包含bin目录被拒绝

    HTTP 错误 404.8 - Not Found HTTP 错误 404.8 - Not Found 请求筛选模块被配置为拒绝包含 hiddenSegment 节的 URL 中的路径. 最可能的原因 ...

  8. 简单粗暴下载Spring

    http://repo.springsource.org/libs-release-local/org/springframework/spring/4.3.3.RELEASE/(想要下载什么版本,替 ...

  9. 纯代码TableView自适应高度（很老的使用方法）

    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{    return  ...

  10. 设置SQLServer的行版本控制隔离级别

    1.--查询数据库状态 select name,user_access,user_access_desc,snapshot_isolation_state,snapshot_isolation_sta ...