学习周记三

最新推荐文章于 2024-01-05 14:18:23 发布

asdfjgiw

最新推荐文章于 2024-01-05 14:18:23 发布

阅读量53

点赞数

分类专栏：周记

本文链接：https://blog.csdn.net/csdn1145/article/details/115287382

版权

周记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

学习周记三
一、css
1.背景图像
background-image:url(图片路径或网址）
2.css连接
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
3.css对齐
水平居中对齐一个元素.可以使用 margin: auto;
文本在元素内居中对齐.可以使用 text-align: center;
图片居中对齐, 可以使用margin: auto;
使用 position: absolute属性来对齐元素
4.float 浮动属性
border-style 值:
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。效果取决于边框的颜色值
5.css显示
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间
h1.hidden {display:none;}
二、实例演示
代码块一：

<head>
<meta charset="utf-8"> 
<title></title> 
<style>
body 
{
	background-image:url('https://tse1-mm.cn.bing.net/th/id/OIP.PbdoK2rBnkOL8DTLACa6ywHaFL?w=239&h=180&c=7&o=5&dpr=1.1&pid=1.7');
	background-repeat:no-repeat;
	background-size:cover;
}
h1
{
	text-align:center;
	color:purple;
}
</style>
</head>

<body>
<font size=6><h1>Ciallo!!</h1></size>
</body>

效果一：

在这里插入图片描述
代码块二：

<head>
<meta charset="utf-8"> 
<title></title> 
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>

<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
</body>