H5C3基础学习总结之杂记1

程序猿tu

已于 2022-02-02 17:07:52 修改

阅读量165

点赞数

分类专栏： HTML/CSS 文章标签： html5 css3

于 2022-02-02 15:30:09 首次发布

本文链接：https://blog.csdn.net/qq_41171409/article/details/122769708

版权

HTML/CSS 专栏收录该内容

17 篇文章 8 订阅

订阅专栏

去掉li前面的项目符号（小圆点）

语法：

list-style: none;

CSS属性书写顺序

建议遵循以下顺序：

布局定位属性：display/position/float/clear/visibility/overflow（建议第一个写display，毕竟关系到模式）
自身属性：width/height/margin/padding/border/background
文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
其他属性(CSS3)：content/cursur/border-radius/box-shadow/text-shadow/background

确定版心

假设页面的版型是1200px，每个版心都要水平居中对齐，可以定义版心为公共类：

.w {
    width: 1200px;
    margin: auto;
}

导航栏制作注意点

是集开发中，一般使用(li+a)的组合标签

优点：

li+a语意更清晰。
如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（容易被搜索引擎降权），从而影响网站排名
若要让导航栏在一行内显示，这需要给li标签加浮动。因为li标签是块级元素，它会一行显示一个标签。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
</head>
<style>
	.nav {
		float: left;
		margin-left: 60px;
	}
	.nav ul li {
		/*靠左浮动*/
		float: left;
		width: 100px;
		height: 40px;
		background-color: pink;
	}	
</style>
<body>
	<div class='nav'>
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">课程</a></li>
			<li><a href="#">职业规划</a></li>
		</ul>
	</div>
</body>

</html>

结果：

圆角边框

通过border-radius属性用于设置元素的外边框圆角

语法：

border-radius:length;

参数值可以为数值或者百分比
如果是正方形盒子，想要变成一个圆，这需要把数字修改为高或者宽的一半（50%）
如果是矩形，这需要设置为高度的一半即可
该属性是一个简写属性，可以跟四个值，分别代表：左上角，右上角，右下角，左下角
分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  border: 2px solid red;
}

p.round1 {
  border: 2px solid red;
  border-radius: 5px;
}

p.round2 {
  border: 2px solid red;
  border-radius: 8px;
}

p.round3 {
  border: 2px solid red;
  border-radius: 12px;
}
</style>
</head>
<body>

<h1>border-radius 属性</h1>

<p>此属性用于为元素添加圆角：</p>

<p class="normal">普通边框</p>
<p class="round1">圆角边框</p>
<p class="round2">角更圆的边框</p>
<p class="round3">角最圆的边框</p>

</body>
</html>

结果；