CSS之盒子模型及常见布局

最新推荐文章于 2022-11-30 11:50:22 发布
最新推荐文章于 2022-11-30 11:50:22 发布
阅读量162 收藏
点赞数
原文链接：http://www.cnblogs.com/backfish/p/4344564.html
版权

盒子模型的综合应用

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;

}

 

转载于:https://www.cnblogs.com/backfish/p/4344564.html

weixin_30596343
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS之盒子模型的布局
qq_53977993的博客
10-18 464
本章主要介绍盒子模型的布局、隐藏元素的方式、阴影和圆角......希望对你有所帮助。
CSS盒子模型汇总
m0_67846661的博客
05-18 501
在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。 盒子模型(Box Model)： Margin(外边距)- 清除边框外的区域，外边距是透明的 Border(边.
【前端】浮动和定位
weixin_30633949的博客
08-17 536
浮动和定位 浮动 什么是浮动？ ​ 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。它可以让任何盒子可以在一行排列，用浮动来布局。 ​ 在css中，通过float属性来定义浮动，其基本语法格式如下： 选择器{float:属性值;} 属性值 描述 left 元素向左浮动 right 元素向右浮动 none 元素不浮动（默认值）...
flex布局 多种方法让两个盒子分布在左右两边
m0_59735348的博客
11-30 1万+
一个父盒子里面包含了两个子盒子的，可以用justify-content:space-between属性。
盒模型和开发中常用的布局
weixin_43735651的博客
06-27 121
盒模型和开发中常用的布局学习笔记
【前端学习笔记】(五)（CSS布局 盒子模型）
weixin_48650082的博客
04-05 1118
盒子模型 1、盒子模型的介绍 （1）盒子的概念 ① 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局 ② 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子 （2）盒子模型 ➢ CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（ margin）构成，这就是 盒子模型 2、内容区域的宽度和高度 3、边框（ border ） 4、内边距（ padding ） 5、外边
css的盒子模型及其它
liguangda的博客
12-03 301
盒子模型 盒子模型的概念 在html中，把每一个元素都当做成一个盒子，拥有盒子的平面外形和空间 盒模型由内容（content）+内边距（padding）+边框（border）+外边距（margin）4部分构成 内容区域：你书写的内容或者子元素能够显示的区域 内边距：撑开内容与边框的距离 边框：元素的边框 外边距：撑开元素和其他元素之间的距离 margin 0 auto居中 在正常的布局中，块级元素具有满屏的属性，也就是在水平方向上占满父级的宽度 满屏以后，内部元素的内容+内边距+边框+外边距 刚
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
深入理解CSS中的盒子模型
09-27
CSS中的盒子模型（Box Model）是网页布局...总的来说，深入理解CSS盒子模型能帮助开发者更好地控制网页元素的外观和交互，从而实现更精细的页面布局。了解和熟练运用盒子模型，可以提升CSS编码的效率和网页设计的质量。
CSS 理解盒子模型
09-25
CSS盒模型是网页布局的基础，它是CSS样式中用于描述元素占据空间的方式。理解盒模型对于任何想要精通网页设计的人来说都是至关重要的。盒模型定义了元素的总尺寸，包括内容(content)、内边距(padding)、边框(border)...
CSS3盒子模型详解
09-25
CSS3盒子模型是网页设计中一个至关重要的概念，它决定了元素在页面上的布局方式。CSS3引入了新的盒模型机制，使得开发者能更精确地控制元素的尺寸和内容的显示。下面将详细介绍CSS3盒子模型的主要知识点。 1. 盒子...
CSS布局之盒子模型属性.docx
11-22
在CSS布局中，盒子模型（Box Model）是一个至关重要的概念，它定义了元素在网页上的占用空间，包括元素的内容区（Content）、内边距（Padding）、边框（Border）和外边距（Margin）。理解并熟练掌握盒子模型的属性...
弹性盒模型布局方式
civet_me的博客
07-07 1151
问题提出 在做前端页面的时候，经常会遇到几个问题 1、布局问题，左右两列布局，左侧固定宽度，右侧自适应；左中右三列布局，左右固定宽度，中间自适应； 2、一个div，上下左右居中； 在前端工作中，这两个问题可以说是层出不穷。在布局上有经典的双飞翼布局、圣杯布局等。这些布局就是利用float、position等属性，使其中一部分脱离文档流。而div上下左右居中，...
关于盒模型的几个相关知识点的总结，以及三列布局的几种方法
qq_40501188的博客
03-18 651
盒模型 盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器 CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框，外边距，内边距和实际内容 三栏布局（左右固定，中间自适应） BFC <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d
盒子模型的布局
weixin_55770237的博客
05-10 877
HTML中标签
CSS总结之盒模型及布局
天颖
05-12 819
盒模型及布局盒模型1. css内边距属性2. css外边距的属性3. css边框的属性边框的样式布局属性1. css浮动属性2. css定位属性 盒模型 盒子模型，英文即box model。无论是div、span、还是a都是盒子。 但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。 css盒模型，包含元素内容content，内边距padding，边框border，外边距margin。 1. css内边距属性 元素的内边距在边框和内容之间
CSS —— 盒子模型（Flexbox 布局方式）
热门推荐
ZhaoYLi 的编程学习笔记
05-11 1万+
目录 传统盒模型 Flexbox 布局方式 Flexbox 核心概念 Flex 容器属性 flex-direction ：项目元素排列的方向 flex-wrap ：项目元素排列方式 justify-content ： 项目在主轴上的对齐方式 align-items ：项目在交叉轴上的对齐方式 align-content ：多行项目的排列方式 Flex 项目属性 order ：项...
Web精选03集（css盒子模型、常用布局）
weixin_38640052的博客
07-09 181
文章目录CSS 盒模型1. 内容尺寸2. 边框1. 边框实现2. 单边框设置3. 网页三角标制作4. 圆角边框3. 内边距4. 外边距布局方式1. 标准流/静态流2. 浮动布局【1】属性【2】取值【3】特点【4】常见问题【5】解决3. 定位布局【1】属性【2】取值【3】偏移属性【4】分类【5】堆叠次序 CSS 盒模型 1. 内容尺寸 一般情况下，为元素设置width/height，指定的是内容框的大小 内容溢出：内容超出元素的尺寸范围，称为溢出。默认情况下溢出部分仍然可见，可以使用overflow调
udp分片报文pcap文件
最新发布
07-18
udp分片报文pcap文件：64kudp大包分成每片658字节总计100片
理解HTML5盒子模型与CSS3布局
HTML5和CSS3是现代网页制作的基础，其中盒子模型是理解网页布局的关键概念。盒子模型（Box Model）是一种将HTML元素视为矩形盒子的思维模式，它描述了元素如何占据空间以及与周围元素相互作用的方式。这个模型包括四...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值