CSS总结2（前端一）

最新推荐文章于 2022-08-10 16:47:09 发布
最新推荐文章于 2022-08-10 16:47:09 发布
阅读量627 收藏
点赞数
文章标签： css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyyyyyy24/article/details/107446825
版权

Day5

一.盒子模型

一.盒子模型

盒子模型中的盒子是指div标签，一个div标签就是一个小盒子，通过多个div盒子来拼凑成整个页面的内容。之所以使用盒子模型因为方便整个页面编写，使得页面编写更有条理。

1.边框

border-width:4px;边框宽度还有border-top(只有上边框)

border-style:none/dotted(点线)/solid(实线)/dashed(虚线)

border-collapse:collapse(让单元格边框合并)

border的简写：border:5px(粗细) solid(样式) pink(颜色);

2.内边距（使用padding不仅有内边距同样也会使得盒子撑大）

padding-left/right/top/bottom:2px;

padding简写padding: 1px 1px 1px 1px;注：上 右 下 左

padding:1px;则默认四个方向内边距都为1px

3.外边距

margin=>padding（即与padding同理）

4.盒子尺寸

盒子大小=边框+内边距+内容宽高

5.text-align和margin区别

前者可通过后边加上center使得”文本“居中；后者可通过auto/xxxpx使“盒子”居中

6.清清除默认边距

往往在编写代码使系统自带默认边距，可在css样式通过此方式清除默认边距：

*{padding:0; margin:0;}

7.插入图片和背景图片的区别

图片用img标签，可用margin,padding调试边距

小图标一些背景图片用background:url()，调试边距用background-position调试

8.使用盒子css属性热度

width>margin>padding

9.盒子阴影:

border-shadow: 1px(水平阴影) 1px(垂直阴影) 1px(虚实阴影) 1px(阴影大小) #44444(阴影颜色);

附上Day5练习代码：
在这里插入图片描述

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>www.Lakers information</title>

<style>

/*以后代码布局盒子时一i的那个要写上这段！！ *{

padding: 0;

margin: 0;

}*/

.box{/*大盒子里边宽高，内距，背景和外距居中*/

width: 310px;

height: 210px;

border: 1px solid #ccc;

margin: 100px auto;

padding: 10px 10px;

background: url(4.jpg);

}

.box h2{/*设置标题的字号，下划线，内距*/

font-size: 20px;

border-bottom: 1px solid #ccc;

padding: 1px 6px ;

}

.box ul li{/*这个是让li左边的黑点消失！！*/

list-style: none;

}

.box ul li{/*设置li中内容高度，并设等高，字体，下划线，小图标*/

height: 20px;

line-height: 20px;

font-size: 13px;

padding: 5px 0px;

border-bottom: 1px dashed #CB2AD8;

background: url(2.jpg) no-repeat ;

margin-left: -40px;

}

.box ul li a{/*让链接下划线消失，设置颜色和左内距*/

text-decoration: none;

color: darkmagenta;

padding-left: 30px;

}

.box ul li a:hover{/*鼠标移动到链接上的效果：链接显示下划线和链接变绿*/

text-decoration: underline;

color:greenyellow;

}

</style>

</head>



<body>

<div class="box">

<h2 > 最新消息/New infomation </h2>

<ul>

<li><a href="#">北京时间3月4日湖人主场力克76人</a></li>

<li><a href="#">詹姆斯连续两个月获取月最佳球员</a></li>

<li><a href="#">安东尼戴维斯防守效率值联盟第一</a></li>

<li><a href="#">湖人队将于3月7号主场迎战雄鹿</a></li>

<li><a href="#">缅怀科比：一日紫金，终身湖人</a></li>

</ul>

</div>

</body>

</html>

Day6

浮动

1.浮动介绍

浮动为行内块元素的特点，float:left/right/none(默认)。使用浮动后原本的元素会漂浮起来，即原本的位置会留给别人，所以用浮动要一浮全浮。同样使用浮动后元素会默认的把其更改为行内块元素。是用浮动的目的就是为了使盒子见能够水平排列。

2.父子盒的关系

子盒不会与父盒重叠；子盒可与父盒有内边距

注意：浮动只影响后边的盒子，并不影响前边的盒子

3.兄弟盒的关系

A浮动B不浮动，则原来AB竖直排列变为只有A（B被压在了后边）

A浮动B浮动，则原来AB竖直排列变为AB水平排列

4.清除浮动

①通过CSS样式：clear:both(两侧)/left/right

②若是父子盒子给父类添加overflow:hidden;

附上Day6练习代码：
在这里插入图片描述

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>湖人队中文门户网站</title>

<style>

* {

margin: 0;

padding: 0;

}

.banana{

width: 700px;

height: 250px;

margin: auto;

}

.apple{

width: 700px;

height: 250px;

}

.pear{

width: 700px;

height: 40px;

background-color: purple;

margin: auto;

}

li{

list-style: none;

}

.pear ul li a{

padding: 30px 22px;

line-height: 35px;

text-decoration: none;

color: gold;

}

.pear ul li a:hover{

text-decoration: underline;

}

.big {

height: 615px;

width: 1226px;

background-color: aqua;

margin: auto;

}

.middle {

float: left;

height: 615px;

width: 234px;

background-color: blue;

}

.middle img{

height: 615px;

width: 234px;

}

.small {

float: right;

width: 992px;

height: 615px;

background-color: antiquewhite;

}

.small li{

float:left;

height: 300px;

width: 234px;

background-color: darkorange;

margin-left: 14px;

margin-bottom: 14px;

box-shadow: 0 15px 30px rgba(0,0,.2);

}

.small li img{

height: 300px;

width: 234px;

}

</style>

</head>



<body>

<div class="banana">

<img class="apple" src="微信图片_20200229175457.jpg">

</div>

<div class="pear">

<ul>

<li>

<a href="#">球队新闻</a>

<a href="#">最近赛程</a>

<a href="#">球队资料</a>

<a href="#">球队历史</a>

<a href="#">球员介绍</a>

<a href="#">发展联盟</a>

</li>

</ul>

</div><br/>

<div class="big">

<div class="middle"><img src="Cache_61426a382308e806..jpg"></div>

<div class="small">

<ul>

<li><a href="#"><img src="IMG_20200306_140335.jpg"></a></li>

<li><a href="#"><img src="img-6f2b038f177d55dae8fd344b9282b797.jpg"></a></li>

<li><a href="#"><img src="img-c2ae995d97fb4b6772756c6f9eb17faf.jpg"></a></li>

<li><a href="#"><img src="img-caac37d42b111d4816d9ff8528c9b353.jpg"></a></li>

<li><a href="#"><img src="Cache_-59c6ee01063b0030..jpg"></a></li>

<li><a href="#"><img src="Screenshot_20200118_201856.jpg"></a></li>

<li><a href="#"><img src="1574059511532.jpeg"></a></li>

<li><a href="#"><img src="img-4406b7fe70efd3d6579149ff18123f7a.jpg"></a></li>

</ul>

</div>

</div>

</body>

</html>

Day7

1.CSS属性书写顺序

布局定位属性：display position float overflow clear content

自身属性：width height margin padding border background

文本属性： color font text-decoration/align

其他属性: border-radius box-shadow

2.布局流程

版行（可视区）

据每行行行罗列而成

制作html结构

附上Day7练习代码：
在这里插入图片描述
在这里插入图片描述

<!doctype html>

<html>



<head>

<meta charset="utf-8">

<title>湖人中文门户网站</title>

<link rel="stylesheet" href="index.css">

<script src="js/jquery.min.js"></script>

<script src="js/index.js"></script>

</head>



<body>

<!--上层搜索栏部分-->

<div class="nav">

<div class="logo">

<a href="#"> <img src="images/微信图片_20200229175457.jpg"></a>

</div>

<div class="text">

<a href="#">球队新闻</a>

<a href="#">球队信息</a>

<a href="#">比赛录像</a>

<a href="#">经典战役</a>

<a href="#">2019-2020常规赛</a>

</div>

<div class="search">

<input type="text" value="请输入您像输入>的内容" />

<button>search...</button>

</div>

<div class="user">

<a href="#">R.I.P for kobe_bryant</a>

</div>

</div>



<!--中层banner部分-->



<div class="ok">

<div class="subnav">

<!--左边盒子-->

<ul>

<li><a href="#">赛季战绩<span>></span></a></li>

<li><a href="#">球员列表<span>></span></a></li>

<li><a href="#">球员数据<span>></span></a></li>

<li><a href="#">球馆信息<span>></span></a></li>

<li><a href="#">球队历史<span>></span></a></li>

<li><a href="#">社区活动<span>></span></a></li>

<li><a href="#">球队论坛<span>></span></a></li>

<li><a href="#">最新新闻<span>></span></a></li>

</ul>

</div>

<div class="banner">

<!--中间盒子-->

<div class="arrle-r">

<a href="#">

< </a>

</div>

<div class="arrle-l"><a href="#">></a></div>

<ul class="ph">

<li class="item one">

<a href="#"> <img src="images/img-caac37d42b111d4816d9ff8528c9b353.jpg"></a>

</li>

<li class="item two">

<a href="#"> <img src="images/img-6f2b038f177d55dae8fd344b9282b797.jpg"></a>

</li>

<li class="item three">

<a href="#"> <img src="images/img-c2ae995d97fb4b6772756c6f9eb17faf.jpg"></a>

</li>

<li class="item four">

<a href="#"> <img src="images/IMG_20200306_140335.jpg"></a>

</li>

</ul>

<ol class="circle">



</ol>

</div>

<div class="myinformation">

<!--右边盒子-->

<div class="up"><span>3月份对阵</br></span></div>

<div class="down">

<div class="headd">

<ul>

<li class="currunt">3月 7日 湖人 VS 雄鹿</li><br>

<li>3月 9日 湖人 VS 快船</li><br>

<li>3月11日 湖人 VS 火箭</li><br>

<li>3月13日 湖人 VS 掘金</li><br>

<li>3月15日 湖人 VS 猛龙</li><br>

<li>3月16日 湖人 VS 热火</li><br>

</ul>

</div>

<div class="main">

<div class="items one">上赛季新晋MVP字母哥与当今联盟第一人勒布朗詹姆斯的对决之战，此场也被视为总决赛预演</div>

<div class="items two">洛杉矶德比，西部最强的两支球队的对战，上赛季FMVP莱昂纳德与詹姆斯的对战，被视为西决预演</div>

<div class="items three">得分狂人哈登是当今联盟最好的得分手，他的得分能力无与伦比，火箭对有极可能与湖人季后赛相遇</div>

<div class="items four">上赛季新晋MVP字母哥与当今联盟第一人勒布朗詹姆斯的对决之战，此场也被视为总决赛预演</div>

<div class="items five">得分狂人哈登是当今联盟最好的得分手，他的得分能力无与伦比，火箭对有极可能与湖人季后赛相遇</div>

<div class="items six">得分狂人哈登是当今联盟最好的得分手，他的得分能力无与伦比，火箭对有极可能与湖人季后赛相遇</div>

</div>

</div>

</div>

<div class="bbbo"></div>

</div>



<!--goods框部分-->

<div class="goods">

<h4>历史球星</h4>

<p>

|<a href="#">魔术师约翰逊</a> |

<a href="#">科比布莱恩特</a> |

<a href="#">大鲨鱼奥尼尔</a> |

<a href="#">勒布朗詹姆斯</a> |

<a href="#">天勾贾巴尔</a>

</p>

<h6 class="more"><a href="#">查看更多>>></a></h6>

</div>



<!--精品框部分-->

<div class="box">

<div class="big">

<ul>

<li>

<a href="#">

<img src="images/img-c2ae995d97fb4b6772756c6f9eb17faf.jpg">

<h4>湖人113：103雄鹿</h4>

</a>

<p>--2020.03.07</p>

</li>

<li>

<a href="#">

<img src="images/img-c2ae995d97fb4b6772756c6f9eb17faf.jpg">

<h4>湖人113：103雄鹿</h4>

</a>

<p>--2020.03.07</p>

</li>

<li>

<a href="#">

<img src="images/img-c2ae995d97fb4b6772756c6f9eb17faf.jpg">

<h4>湖人113：103雄鹿</h4>

</a>

<p>--2020.03.07</p>

</li>

<li>

<a href="#">

<img src="images/img-c2ae995d97fb4b6772756c6f9eb17faf.jpg">

<h4>湖人113：103雄鹿</h4>

</a>

<p>--2020.03.07</p>

</li>

<li>

<a href="#">

<img src="images/img-c2ae995d97fb4b6772756c6f9eb17faf.jpg">

<h4>湖人113：103雄鹿</h4>

</a>

<p>--2020.03.07</p>

</li>

<li>

<a href="#">

<img src="images/img-c2ae995d97fb4b6772756c6f9eb17faf.jpg">

<h4>湖人113：103雄鹿</h4>

</a>

<p>--2020.03.07</p>

</li>

<li>

<a href="#">

<img src="images/img-c2ae995d97fb4b6772756c6f9eb17faf.jpg">

<h4>湖人113：103雄鹿</h4>

</a>

<p>--2020.03.07</p>

</li>

<li>

<a href="#">

<img src="images/img-c2ae995d97fb4b6772756c6f9eb17faf.jpg">

<h4>湖人113：103雄鹿</h4>

</a>

<p>--2020.03.07</p>

</li>

<li>

<a href="#">

<img src="images/img-c2ae995d97fb4b6772756c6f9eb17faf.jpg">

<h4>湖人113：103雄鹿</h4>

</a>

<p>--2020.03.07</p>

</li>

<li>

<a href="#">

<img src="images/img-c2ae995d97fb4b6772756c6f9eb17faf.jpg">

<h4>湖人113：103雄鹿</h4>

</a>

<p>--2020.03.07</p>

</li>

</ul>

</div>

</div>



<!--最大后的结尾了-->

<div class="footer">

<div class="one">

<dl>

<dt>移动端信息 :<a href="#">

<dd>湖人队官方微博</dd>

<dd>湖人队微信公众号</dd>

<dd>湖人队twiter</dd>

<dd>湖人队youtube</dd>

<dd>湖人队facebook</dd>

</a></dt>

</dl>

</div>

<div class="two">

<dl>

<dt>最新信息 :<a href="#">

<dd>湖人队就职机会</dd>

<dd>湖人队社区行动</dd>

<dd>湖人队中国行</dd>

<dd>湖人队夏季联赛</dd>

</a></dt>

</dl>

</dl>

</div>

<div class="three">

©2018年著作权 NBA 中国所有权。<br> NBA.com/China上除去使用条款中所特别提及的部分之外，其它任何内容都不得以任何形式被复制、再传播，或篡改。

<br> 进入NBA.com/China后，即表示阁下同意遵守NBA.com/China的隐私政策和使用条款。

<br> 有任何的建议和意见，都欢迎联络我们：NBAChinaInfo@nba.com

<br> 有关NBA商品授权合作事宜，敬请联系:GMGChinaBusinessInquiry@nba.com

</div>

</div>

<!-- 电梯门 -->

<div class="back">返回顶部</div>



</body>



</html>
zyyyyyy24
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端html,css总结
weixin_44682507的博客
03-16 3366
前端ER图设计 首页有什么元素（搜索框，文章标题内容），可以跳转到哪些个页面上（编辑页，搜索页，个人页） 内容页，搜索页，编辑页 示例： 主页内容讨论 前端ER图 HTML总结: 数据类型与内容 2.基本格式： 标签 + 属性(可选，如a href=””, img scr=””) + 样式（class=） 3.常见的html元素（数据类型） 列表（ul,ol，li），表单（form,input...
选择器与常用属性
weixin_30894583的博客
05-28 175
一、**css2的选择符：----------------------------------------------------------------- 1. html选择符（标签选择器） 就是把html标签作为选择符使用 如 p{....} 网页中所有p标签采用此样式 h2{....} 网页中所有h2标签采用此样式 2. class类选择符 (使用点.将自定义名（类名）来定...
前端CSS总结
weixin_30852451的博客
07-24 79
一、CSS介绍 CSS是Cascading Style Sheets的简称，中文称为层叠样式表，...
前端-css总结
qq_39009130的博客
06-15 361
二.CSS 1.概述 1.样式包含 选择器 声明：（属性名：属性值;） 2.CSS基本格式 选择器{属性名：属性值;} 2.CSS样式的三种格式 优先级：内嵌式>内部式>外部式 内嵌式：在html标签的style中编写样式 <div style="color: red;"></div> 内部式：在该html页面的style编写样式 <style type="text/css"> .myclass{ color: red;
前端——CSS部分总结
qq_53935542的博客
08-10 245
CSS 指的是层叠样式表 (Cascading Style Sheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS 节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在 CSS 文件中简单的css实例body {} h1 {font-family : 幼圆;} p {}效果图CSS解决的问题HTML的目的是描述网页的内容，并且在HTML里面用标签和color属性给大型网站的页面添加字体和颜色样式是一个漫长且昂贵的过程。...
前端面试之CSS总结
01-29
由于最近在准备前端方面的面试，所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上)，有许多地方叙述的并不是十分详细，只是大致的描述一下，给自己提供一个知识轮廓。本篇中主要描述了CSS中的基础部分...
前端css总结
03-23
css总结很全，前端小白学习必备。后期还会发JS的。赚点积分
前端三件套之一：css学习总结思维导图
04-02
个人总结，希望能有所帮助
免费下载前端HTML，CSS总结(b站黑马程序员540集)
最新发布
06-19
前端开发是创建网页和应用程序的过程，包括HTML、CSS和JavaScript的使用。前端开发者需要关注用户体验，确保网站在不同设备和浏览器上都能正常工作。 响应式设计是现代前端开发的重要概念，它允许网页根据用户的...
web前端笔试面试总结+js+css
09-20
【描述】: "这是一份针对web前端面试的总结，涵盖了js和css的相关知识，特别适合面试准备阶段的小白使用，内容全面" 【标签】: "css 前端 求职面试 范文/模板/素材 javascript" 【主要内容】: 在web前端面试和...
前端——CSS学习总结
捣蛋龙的博客
04-14 1020
CSS 1. css简介 1.1 HTML 的局限性 说起 HTML，这其实是个非常单纯的家伙，他只关注内容的语义。比如 表明这是一个大标题， 表明这是一个段落， 表明这儿有一个图片， 表示此处有链接。 很早的时候，世界上的网站虽然很多，但是他们都有一个共同的特点：丑。 虽然 HTML 可以做简单的样式，但是带来的是无尽的臃肿和繁琐…… 1.2 CSS-网页的美容师 CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。 CS
前端css 样式总结
开发猫
06-21 491
align-items align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 居中对齐弹性盒的各项 <div> 元素： div { display: flex; align-items:center; } :link a:link 选择所有未访问链接 :visited a:visited 选择所有访问...
前端学习：css总结
he13733625052的博客
11-26 314
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 <html> <head>...</head> <body>...</body> </html> <head>标签用于定义文档的头部，它是所...
前端CSS学习小总结
qq_51878644的博客
08-06 680
css学习小总结
前端自学 - CSS总结篇（一）
一只小网虫的博客
08-31 396
关于前端必备知识，CSS基础的一点总结，欢迎大家来观看哦~
前端基础：CSS总结
时光
04-18 1683
前端基础：CSS总结
前端基础总结--CSS
chenyouleww的博客
07-08 550
前端 1.1前端方向 所谓前后端本身就是 Web 开发中，为了区分在服务器上运行的和在浏览器上运行的东西而出现的定义。 前端开发的体系划分，在我看来，就是两种，第一种就是ui实现的，不重业务逻辑，动态交互的。第二种就是各种业务逻辑，动态交互，数据处理的。这是很明显区分你要做什么任务，以及开发时的顺序的。 一般的我们说前端都是小前端，就是web端。 大前端一般是指web端，小程序端，移动端（Android，iOS），Windows端，macOS端，Linux端 1.2前端的技术 前端能做什么？ 前端能做你上网
前端基础总结-CSS
前端知识点总结
07-14 1713
1.初识CSS 概念： ​ CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表） 作用： 主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式 CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式 2. 引入CSS样式表 2.1 行内式 概念： ​ 称为行内样式、行间样式、内联样式 ​ 是通
【前端面试CSS篇】
mengStudents的博客
10-11 2370
css
前端面试CSS精华：基础与CSS3特性概览
前端面试之CSS总结是一篇关于面试准备中CSS知识点的概述文章。作者针对前端面试中可能会被问到的CSS基础和CSS3新特性的理解进行了整理。CSS可以类比为绘画，它涉及的内容包括元素的定位、盒模型、颜色、背景和文本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值