学习记录（第二周）

最新推荐文章于 2024-06-21 08:52:31 发布

淡墨_

最新推荐文章于 2024-06-21 08:52:31 发布

阅读量118

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/qq_51773304/article/details/119145687

版权

上周末因为疫情放假回家，耽误了一次作业。现在补上。

1.圆角边框

<1>.正方形想要设置成圆形，需要把length设置成高度的一半或者直接写成50%

例如; .radius {

height:200px;

width:200px;

border-radius:100px;

(或者border-radius:50%;)

}

<2>.矩形想要设置成圆角矩形，需要把length设置成高度的一半

例如：.radius {

height:200px;

width:100px;

border-radius:100px;

}

也可以对每个角设置，例如 border-radius:10px 20px 30px 40px;(顺时针，和margin padding一样) 如果border-radius:10px 20px;这时指的是对角线

2.盒子阴影

如果想要让鼠标经过盒子时出现阴影，只需要把盒子加上：hover即可

例如：div:hover{

box-shadow:10px 5px 3px -4px rgba(0,0,0,.3);

}

3.传统网页布局的三种方式

<1>.标准流：标签按照规定好默认方式排列

<2>浮动

<3>定位

4.网页布局第一准则

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

5.浮动

<1>浮动最典型的应用：让多个块级盒子一行内排列显示

也可以把div转化为行内块元素display:inline-block;只不过后者盒子之间由空隙。

<2>如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列

<3>注意:浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子都会另起一行对齐

<4>任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性

<5>浮动元素经常和标准流父级搭配使用

<6>为了约束浮动元素位置，网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

<7>清除浮动的原因

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子

清除浮动后，父盒子会根据子盒子自动检测高度

<8>清除浮动语法

<9>清除浮动的方法

1.额外标签法：在浮动元素的末尾添加一个空标签(必须是块级元素,行内元素比如span就不可以)，例如

.clear {

clear:both;

}

<div>class=”clear”</div>

或者其他标签，如：<\br>

2.父级添加overflow属性

常用的是：overflow:hidden;

3.父级添加after伪元素

.clearfix:after {

content:"";

display:block;

height:0;

clear:both;

vidibility:hidden;

}

.clearfix {

*zoom:1;

}

只需要把这段代码复制过来，哪一个盒子需要清除浮动，就在在哪一个盒子添加clearfix

例如：<div class="box clearfix"></div>

4.父级添加双伪元素

clearfix:after {

content:"";

  display:block;

  height:0;

  clear:both;

  vidibility:hidden;

}

.clearfix {

*zoom:1;

}

也是直接粘贴过去，直接用就行 <div class="box clearfix"></div>

6.网页布局第二准则

先设置盒子大小，在设置盒子的位置

7.常见的图片格式

8.CSS的书写顺序

例如：

9.页面布局的整体思路

10.学习实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			li {
				list-style: none;
			}
			a {
				text-decoration: none;
				color: #746c6e;
			}
			.box {
				height: 289px;
				width:350px;
				border:1px solid #ccc;
				margin: 100px auto;
				}
		    .box h3 {
				height: 32px;
				font-size: 14px;
				font-weight: 400;
				border-bottom:1px dotted #ccc;
				padding-left:120px;
				line-height: 32px;
			}
			.box ul  {
				margin: 22px 0 0 37px;
			}
			.box ul li {
				height: 43px;
			}
			.box ul li a:hover {
				text-decoration: underline;
			}
			
				
			
		</style>
	</head>
	<body>
		<div class="box">
			<h3>品优购快报</h3>
			<ul>
				<li><a href="#">【特惠】爆款耳机五折秒</a></li>
				<li><a href="#">【特惠】母亲节，健康好礼低至五折</a></li>
				<li><a href="#">【特惠】爆款耳机五折秒</a></li>
				<li><a href="#">【特惠】9.9元洗一百张照片</a></li>
				<li><a href="#">【特惠】长虹智能空调立省1000</a></li>
			</ul>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				background-color:pink;
			}
			.box {
				height: 693px;
				width:1389px;
				background-color: #f5f5f5;
				margin:0 auto;
			}
			.right {
				float:left;
				width: 297px;
				height: 693px;
				background-color: #ffffff;
			}
			.left {
				float:left;
				height: 771px;
				width: 1092px;
			}
		    .left>div {
				float:left;
				width:257px;
				height:338px;
				background-color: #ffffff;
				margin-left: 16px;
				margin-bottom: 16px;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="right">你好，张三丰先生</div>
			<div class="left">
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
				<div>5</div>
				<div>6</div>
				<div>7</div>
				<div>8</div>	
			</div>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				background-color: pink;
			}
			* {
				margin:0;
				padding:0;
			}
			.top {
				height: 50px;
				background-color:#ffffff;
			}
			li {
				list-style: none;
			}
			.banner {
				height: 237px;
				width: 980px;
				background-color: #ffffff;
				margin: 10px auto;
			}
			.box {
				width: 980px;
				height: 400px;
				background-color: #ffffff;
				margin:10px auto;
			}
			.box li {
				height: 400px;
				width: 237px;
				float:left;
				background-color: #ffffff;
				margin-right: 10.5px;
			}
			.box .last {
				margin-right: 0;
			}
			.footer {
				height: 100px;
				background-color: #ffffff;
			}
		</style>
	</head>
	<body>
		<div class="top">top</div>
		<div class="banner">banner</div>
		<div class="box">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li class="last">4</li>
			</ul>
		</div>
		<div class="footer">footer</div>
	</body>
</html>

11.感悟

制作网页时，在浏览器上测量盒子的大小，再按照相同的大小用HBulider和IE浏览器做出来的和原浏览器上的大小不一致。不过换成谷歌浏览器之后能够减少这种情况，在有些时候还需要自己微调。最好使用PS测量盒子大小，感觉它测量的更准确。

淡墨_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习记录（第二周）

制作网页时，在浏览器上测量盒子的大小，再按照相同的大小用HBulider和IE浏览器做出来的和原浏览器上的大小不一致。不过换成谷歌浏览器之后能够减少这种情况，在有些时候还需要自己微调。最好使用PS测量盒子大小，感觉它测量的更准确。...
复制链接

扫一扫