HTML美化页面（下）

1.表格的边框处理

文字相关的样式

鼠标的形状设计

定位

当多个行元素内块在一行时，可以控制对齐方式

浮动定位

1.表格的边框处理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">table{width:300px;height:200px;text-align:center;}table,td,th{border:1px solid red;/*合并二个表格相邻的边框*/border-collapse:collapse;}</style>
</head>
<body><table><tr><th>id</th><th>姓名 </th><th>年龄</th><th>性别 </th></tr><tr><td>1</td><td>袁世龙</td><td>18</td><td>男</td></tr><tr><td>2</td><td>金友鑫</td><td>19</td><td>男</td></tr><tr><td>3</td><td>董恒</td><td>  16</td><td>男</td></tr></table>
</body>
</html>

文字相关的样式

——文字大小

font-size:单位；

——字体颜色

color:颜色值

——文字的横向位置

text-align: left/center/right;

——文字斜体

font-style:oblique;

——文字加粗

font-weight:bold;

——文字修饰

test-decoration:

——underline : 下划线

——overline : 上划线

——line-throught:删除线

——文本行高****

line-height: 长度

我们通常使用行高来完成垂直居中的操作

——字体设计

font-family:字体名称

安装字体：

@font-face{

font-family:字体名称；

src:url("字体路径");

}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type = "text/css">div{width:200px;height:200px;border:2px solid red;margin-top: 10px;text-align:center;}.div1{padding-top:89px;padding-bottom:90px;}.div2{line-height: 200px;}</style>
</head>
<body><div class="div1">金友鑫</div><div class="div2">金友鑫</div><div class="div3">金友鑫</div><div class="div4">金友鑫</div><div class="div5">金友鑫</div></body>
</html>

鼠标的形状设计

用于控制光标移到某元素上时光标形状

cursor :

取值：

—— default: 默认鼠标形状，根据应用场景自动变化

——pointer:手指形状，常用于提示用户点击

——text: 焦距形状（可输入的 I 字形）

——wait :等待

——help:帮助

——progress:进行中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{width:100px;height:100px;border:2px solid red;margin-top:10px;}.div1{cursor:pointer;}.div2{cursor:text;}.div3{cursor:progress;}.div4{cursor:wait;}.div5{cursor:help;}</style>
</head>
<body><div class ="div1" ></div><div class ="div2" ></div><div class ="div3" ></div><div class ="div4" ></div><div class ="div5" ></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">ul li{/* list-style-type:none;*//* list-style-type:circle;*/list-style-type:square;}ol li{list-style-type:lower-roman;}</style>
</head>
<body>
<ul><li>1111111</li><li>2222222</li><li>3333333</li><li>4444444</li><li>5555555</li>
</ul><ol><li>1111111</li><li>2222222</li><li>3333333</li><li>4444444</li><li>5555555</li></ol></body>
</html>

定位

默认元素分三类

1.块元素 block

独占一行，可以调整宽高，多个块元素之间从上到下排列

2.行内块元素，inline-block

与其他内块元素或行内元素共用一行空间，从左至右排列，一排满自动换行

3.行内元素 inline

与其他行内块元素或行内块元素共享一行空间，从左至右排列，一行排满自动换行

可以通过display样式修改元素的分类

——none: 隐藏的元素，不显示

——inline: 调整为行内块元素

——inline-block:调整为内块元素

——block : 调整为块元素

当多个行元素内块在一行时，可以控制对齐方式

vertical-align

- top:设置元素的顶端与行中最高的元素顶端对齐

-text-top:设置元素的顶端与父元素字体顶端对齐

-middle:把此元素放在父元素的中部

浮动定位

可以调整元素漂浮显示在父元素的左或右

格式：

float: left/right;

清楚浮动：

控制某个元素的指定方向不允许出现浮动

clear: left/right/both;

这三种定位，都是通过如下四个样式来完成定位的：

left:长度；

top:长度；

right:长度；

bottom:长度；

在相对定位中，上面的四个样式，表示：

元素相对原来的位置的某方向偏移值

例如：

当指定left:10px ,则表示向右移动10个像素

当指定left:-10px,则表示向左移动10个像素

在绝对定位中，上述四个样式表示

距离body的边界的某个方向的距离

特殊：如果这个元素的某个上层元素是绝对定位或固定定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.top{background-color:#dddd;color:#666;}body{margin: 0px;}.top_content{width:1000px;margin: 0 auto;}.top_content_left{width:30%;}.top_content_right{width:70%;}.top_content_left>img{width:21px;height:21px;margin-top:12px;}.top_content>div{display: inline-block;}.top_content_right li{display:inline-block;margin-left:5px;margin-right:5px;}</style>
</head>
<body><div class="top"><div class="top_content"><div class ="top_content_left"><imgsrc="https://i03piccdn.sogoucdn.com/71821b739b986bd5"><span> 南京 </span></div><div class = "top_content_right"><ul><li class="li1">欢迎</li><li>我的订单</li><li>我的百度</li><li>百度会员</li><li>百度等级</li><li class="li2">充值中心</li></ul></div></div></div></body>
</html>

HTML美化页面（下）相关推荐

h5、select下拉框右边加图标，深度美化页面增进用户体验
h5.select下拉框右边加图标,深度美化页面增进用户体验 1.那么我们先来看一下效果吧! 2.再看看h5的结构: <div id="login-div"><d ...
前端(五)——CSS之美化页面
文章目录 1. 美化页面原因 2. span标签 3. 字体样式 4. 文本样式 5. 超链接伪类 6. 列表 7. 背景 8. 渐变 9. 盒子模型 1. 美化页面原因有效的传递页面信息美化网页 ...
网站系统维护通知美化页面
网站系统维护通知html美化页面站点服务器系统正在维护本站用于宝塔服务器维护页一个HTML的页面源码主要用途就是当你的网站需要临时维护的时候在网站访客打开网站的时候看到的不是空白提升用户体 ...
CSS入门二、美化页面元素
零.文章目录 CSS入门二.美化页面元素 1.字体属性 CSS Fonts (字体)属性用于定义字体系列.大小.粗细.和文字样式(如斜体) (1)字体系列font-family font-family ...
04-前端技术_CSS与CSS3美化页面
目录二,CSS与CSS3美化页面 1,CSS简介 1.1 什么是CSS? 1.2 样式层叠次序 2,CSS基础语法 2.1 介绍 2.2 注释 3,CSS使用方式 3.1 如何插入样式表 3.2 外 ...
Java学习-14 CSS与CSS3美化页面及网页布局
Java学习-14 CSS与CSS3美化页面及网页布局 1. CSS简介什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示控制 HTML 元素, ...
微信小程序订单页面下拉刷新上拉分页加载
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 效果图: 代码: json代码: {"enablePullDownRefresh" ...
php只显示一部分文章,typecho同一个页面下调用不同分类的文章但是却只显示一个分类文章...
typecho同一个页面下调用不同分类的文章但是却只显示一个分类文章作者:佚名来源:爱好者时间:2018-04-30 问题描述: 同页面调用分类下文章,只显示一第一个分类下的文章在一个页面中, ...
this.$router.push如何刷新页面_小程序丨微信小程序如何实现页面下拉刷新
微信小程序蕴含着众多功能,本期将简单介绍实现页面下拉刷新的方法,通过阅读本文,读者们可以自行动手操作,在实践中认识微信小程序. 首先,我们需在json配置中写出以下配置: "enablePu ...
Magento: 产品页面下jquery change函数失效 Call javascript function onchange product option
明显的原因是change函数跟magento默认的onchange函数冲突. 一个方法是编辑 /js/varien/configurable.js 文件 : Place call to your f ...

HTML美化页面（下）

1.表格的边框处理

文字相关的样式

鼠标的形状设计

定位

当多个行元素内块在一行时，可以控制对齐方式

浮动定位

HTML美化页面（下）相关推荐

最新文章

热门文章