盒子模型的综合应用

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. Handler的总结

    Handler的总结 我们创建的Service.Activity,Broadcast均是一个主线程处理,即UI线程, 但是进行耗时操作时,比如I/O读写的大文件,数据库操作及网络下载需要很长的时间,为 ...

  2. EditText中输入手机号码时，自动添加空格

    输入手机号码时,自动添加空格,更容易辨别 public class PhoneWatcher implements TextWatcher { private EditText _text; publ ...

  3. JSTL标签出错：<c:forEach var="book" items="${requestScope.books}" varStatus="status">

    今天在运行书里的JSTL标签代码的时候出错,总结一下: 问题1.The JSP specification requires that an attribute name is preceded by ...

  4. [daily] 宇宙终极shell之zsh

    序 很久以前,我就知道zsh.后来在并不遥远的好几年前,第一次装arch的时候,默认shell就是zsh.虽然用起来不太习惯,但是仍然蛮好用的. 决定好好的学一下zsh,如果可以就切换过去,毕竟bas ...

  5. securtcrt session配置转xshell的session配置

    参数: 1.securtcrt的session目录 2.一个xshell的模版文件 3.输出目录(必须不存在,自动创建) #!/usr/bin/python # -*- coding:utf-8 -* ...

  6. Maven-005-部署构件至 nexus 私服

    nexus 私服仓库中宿主仓库主要用于储存装置内部的或一些无法从公共仓库获取的第三方构件,供项目组的人员使用.日常开发中,可将各版本构件直接部署到 Nexus 中对应策略的宿主仓库中.上篇文章中讲述了 ...

  7. Diablo2 1.13版&PlugY10.00 男巫存档

    下载地址: http://files.cnblogs.com/files/xiandedanteng/20160805D2113NanwuL83Backup.rar 解压后文件放到Diablo2游戏的 ...

  8. IntelliJ IDEA全文搜索很给力

  9. LeetCode Number of 1 Bits

    原题链接在这里:https://leetcode.com/problems/number-of-1-bits/ 题目: Write a function that takes an unsigned ...

  10. Lua Rings库介绍

    Rings需求 如果有一段lua脚本代码, 本来来源不可靠, 可能有安全性问题, 或者不像让这份代码污染了正在执行的lua环境, 则需要lua rings工具出厂了. 其在主lua环境中,即在宿主脚本 ...