前端笔记-2019.08.06

最新推荐文章于 2024-08-03 21:16:42 发布

casidhe_lyq

最新推荐文章于 2024-08-03 21:16:42 发布

阅读量246

点赞数

分类专栏：前端学习笔记文章标签：前端学习笔记

本文链接：https://blog.csdn.net/qq_37137948/article/details/98650095

版权

学习笔记同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

前端笔记-2019.08.06

sublime HTML初始化
HTML
CSS

sublime HTML初始化

今天不甘心手敲基本的HTML代码，得知了一个得到初始化HTML代码的小技巧

手敲!或者html:5，然后按tab键，下面就是见证奇迹的时刻

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>       	
</body>
</html>

当然首先得确保你编辑的文档是HTML文档，并且已经选择好了编码格式UTF-8

HTML

列表标签

有序列表

外<ol></ol>，内<li></li>

<ol>
		<li>测试1</li>
		<li>测试2</li>
		<li>测试3</li>
		<li>测试4</li>
</ol>

无序列表

外<ul></ul>，内<li></li>

<ul>
		<li>测试1</li>
		<li>测试2</li>
		<li>测试3</li>
		<li>测试4</li>
</ul>

超链接

<a href="https://www.baidu.com">百度</a>

效果：百度

CSS

改变列表样式

list-type-style可改变项目符号的样式。
ol:

list-style-type:upper-roman
list-style-type:lower-alpha

ul:

list-style-type:cycle
list-style-type:square

不想要列表项目前面的样式怎么办呢？可以用none

list-style-type:none

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>imooc</title>
	<style type="text/css">
		#t1{
			list-style-type:circle;
		}
		#t2{
			list-style-type:square
		}	
		#t3{
			list-style-type:upper-roman;
		}
		#t4{
			list-style-type:lower-alpha
		}	
	</style>
</head>
<body>
	<ul>
			<li id="t1">测试1</li>
			<li id="t2">测试2</li>
			<li>测试3</li>
	</ul>
	<ol>
			<li id="t3">测试4</li>
			<li id="t4">测试5</li>
			<li>测试6</li>
	</ol>
</body>
</html>

在这里插入图片描述
由此可见，list-type-style虽然可以改变项目的样式，但是序号依旧不变

盒子模型

所有HTML元素可以看作盒子，在CSS中，"盒子模型"这一术语是用来设计和布局时使用。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括四个主要部分：内容、内边距、边框、外边距。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
在这里插入图片描述 Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

上下左右

盒子模型的margin、border、padding均可加上上下左右的后缀来具体指定
上下左右：

top
bottom
left
right

例如：

border-top: 1px solid black
margin-top：10px
padding-left：0

最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

边框

实线边框（solid）
虚线边框（dashed）
点线边框（dotted）
双线边框（double）

练习代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>imooc</title>
	<style type="text/css">
/*		ul{
			list-style-type:none;
		}	*/
		ul{
			width: 200px;
			height:200px;
			background-color: yellow;

			list-style:none;
			
			border-top: 1px dashed black;
			/*border: 1px solid black;*/
			padding-left: 0px;

			margin-top: 100px;

		}
		ol{
			width: 200px;
			height: 200px;
			background-color: grey;
		}	
	</style>
</head>
<body>
	<ol>
			<li>测试1</li>
			<li>测试2</li>
			<li>测试3</li>
			<li>测试4</li>
	</ol>
	<ul>
			<li>测试1</li>
			<li>测试2</li>
			<li>测试3</li>
			<li>测试4</li>
	</ul>
</body>
</html>

在这里插入图片描述

文本

文本的对齐方式

text-align:center 居中对齐
text-align:right 靠右对齐（可上下左右）
text-align:justify

要注意的是超链接一般对齐方式使用的是外面一层的标签，如

<div>
	<a href="https://www.baidu.com">百度</a>
</div>

在style中设置div{text-align: center;}而非a{text-align: center;}

设置行高

CSS属性之line-height
line-height:200px
注意：负值是不允许的
可使用的属性值

值	描述	举例
normal	默认。设置合理的行间距。	默认
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。	line-height:100px
%	基于当前字体尺寸的百分比行间距。	line-height:200%
inherit	规定应该从父元素继承 line-height 属性的值。

文本修饰

text-decoration

h1 {text-decoration:overline;}上划线
h2 {text-decoration:line-through;}删除线
h3 {text-decoration:underline;}下划线
a {text-decoration:none;}

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 300px;
			height: 200px;
			background-color: grey;

			text-align: center;
			
		}
		a{
			line-height: 175px;
			font-size: 50px;
			color: white;
			text-shadow: #ff00de -1px  3px 3px;
			text-decoration: none;
		}
	</style>
</head>
<body>
	<div>
		<a href="https://www.baidu.com">百度</a>
	</div>

</body>
</html>

在这里插入图片描述

casidhe_lyq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端笔记-2019.08.06

前端笔记-2019.08.06sublime HTML初始化HTML列表标签有序列表无序列表超链接CSS改变列表样式盒子模型上下左右边框：文本文本的对齐方式设置行高文本修饰昨天感冒+拉肚子了，笔记今天补上了，今天鼻涕流了一天，脑壳也疼，希望能按时完成任务不要拖
复制链接

扫一扫

专栏目录