字体的简写属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体的简写属性</title>
<style>
div{
border: 1px red solid;
line-height: 2;
/* font可以设置字体相关的所有属性
语法：
font：字体大小/行高 字体族
行高 可以省略不写 如果不写使用默认值
*/
/* font-size: 50px;
font-family: 'Times New Roman', Times, serif; */
/* font:50px 'Times New Roman', Times, serif;
line-height: 2; */
font: bold italic 50px/2 'Times New Roman', Times, serif;
font-size: 50px;
/* font-weight字体加粗
可选值
normal默认值不加粗
bold加粗
100~900九个级别
font-style字体的风格
normal正常
italic斜体
*/
/* font-weight: bold; */
/* font-weight: 800;
font-style: italic;
} */
</style>
</head>
<body>
<div>你是我的小丫小苹果you are my apple </div>
</body>
</html>
文本的水平和垂直对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本的水平和垂直对齐</title>
<style>
div{
width: 400px;
border: 1px red solid;
/* text-align文本的水平对齐
可选值
left左侧对齐
right右对齐
center居中
justify两端对齐
*/
text-align: left;
font-size: 50px;
}
span{
font-size: 20px;
border: 1px blue solid;
/*
vertical-align设置元素垂直对齐
可选值
baseline默认值基线对齐
top顶部对齐
bottom底部对齐
middle居中对齐
除了基线对齐，其他值均可消除图片与边框之间的距离
*/
vertical-align: 30px;
}
p{
border: 1px green solid;
}
img{
vertical-align: top;
}
</style>
</head>
<body>
<div>
今天我liux<span>要去玩耍kjui</span>
</div><br>
<div>
i live in china ,where are you from ?what`s your name? my name
is liming,what do you want to do?
</div>
<p>
<img src="../exercise/img/1.jpg" alt="">
</p>
</body>
</html>其他的文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>其他的文本样式</title>
<style>
.box1{
font-size: 50px;
font-family: 微软雅黑;
/*
text-decoration设置文本修饰
可选值
none什么都没有
nuderline下划线
line-through删除线
overline上划线
*/
/* text-decoration: overline; */
text-decoration: underline red dotted;
}
.box2{
/*
white-space设置网页如何处理空白
可选值
normal正常
nowrap不换行
pre保留空白
*/
font-size: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="box1">今天是个好日子</div>
<div class="box2">
kh j df v dhv djb sd jk hbs vb jks dv uiu sh di khs dvu ib dv gy bd sd
dskhv jfb khdv kdhvd
</div>
</body>
</html>有些属性，ie浏览器已不支持，例：下划线的颜色等
京东顶部导航条 （状态：“北京下拉框内html已完成，还缺css”）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东顶部导航条</title>
<!-- 引入重置样式表 -->
<link rel="stylesheet" href="../css/reset.css">
<!-- 引用图标字体 -->
<link rel="stylesheet" href="../../06font&background/fa/css/all.css">
<style>
body {
/* 设置字体 */
font: 6px Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
}
.clearfix::before,
.clearfix::after {
content: '';
display: block;
clear: both;
}
/* 设置外部容器的样式 */
.top-bar-wrapper {
/* 设置宽度 */
width: 100%;
height: 31px;
/* 设置背景颜色 */
background-color: #E3E4E5;
/* 设置行高 */
line-height: 30px;
/* 下边框 */
border-bottom: 1px #ddd solid;
}
.top-bar {
width: 1190px;
margin: 0 auto;
background-color: #E3E4E5;
position: relative;
}
.top-bar a:hover,
.top-bar span:hover,
.top-bar a.hightlight {
color: #f10215;
}
.top-bar .beijingcolor:hover {
color: #999;
}
.top-bar a,
.top-bar span,
.top-bar i {
color: #999;
text-decoration: none;
}
.top-bar i.fas {
font-size: 5px;
margin-right: 10px;
}
.location i.fas {
color: #f10125;
margin-right: 0px;
}
/* beijing··· */
.location .city-list,
.jdbb .myjd-list,
.qycgbb .qycg-list {
width: 300px;
/* height: 436px; */
background-color: white;
border: 1px solid rgb(204, 204, 204);
display: none;
position: absolute;
top: 31px;
/* left:0px; */
box-shadow: 0 0.5px 0.5px rgba(0, 0, 0, .2);
z-index: 1;
}
.sjbb .sj-list {
width: 320px;
height: 436px;
background-color: white;
border: 1px solid rgb(204, 204, 204);
display: none;
position: absolute;
top: 31px;
left: 637px;
box-shadow: 0 0.5px 0.5px rgba(0, 0, 0, .2);
z-index: 1;
}
.wzbb .wz-list {
width: 1200px;
height: 180px;
background-color: white;
border: 1px solid rgb(204, 204, 204);
display: none;
position: absolute;
top: 31px;
left: -85px;
box-shadow: 0 0.5px 0.5px rgba(0, 0, 0, .2);
z-index: 1;
}
/* 下拉框的显示*/
.location:hover .city-list,
.jdbb:hover .myjd-list,
.qycgbb:hover .qycg-list,
.sjbb:hover .sj-list,
.wzbb:hover .wz-list {
display: block;
}
/* 我的北京，京东···的边框 */
.current-city,
.shortcut span,
.myjd,
.shortcut a,
.qycg,
.sj,
.wz {
padding: 0 5px;
position: relative;
border: 1px solid transparent;
border-bottom: none;
z-index: 2;
}
/* 鼠标移入北京时字体背景的样式 */
.location:hover .current-city,
.jdbb:hover .myjd,
.qycgbb:hover .qycg,
.sjbb:hover .sj,
.wzbb:hover .wz {
background-color: rgb(252, 250, 250);
border: 1px solid rgb(204, 204, 204);
border-bottom: none;
padding-bottom: 1px;
}
.location {
float: left;
}
/* 北京的浮动 */
.shortcut {
float: right;
}
/* 右侧列表的浮动 */
.shortcut li {
float: left;
}
/* 竖线的样式 */
.shortcut .line {
width: 1px;
height: 10px;
background-color: #999;
margin: 10px 0;
}
/* 地址下拉框 */
.itembb .item {
float: left;
width: 60px;
text-align: center;
}
.itembb .item a:hover {
background-color: #E3E4E5;
padding: 3px 8px;
color: red;
}
.item_title,
.itemthreetitle{
color:#999;
}
.outer_item{
margin: 10px 20px;
padding: 10px 0;
border-top: 1px #999 dashed;
border-bottom: 1px #999 dashed;
}
.inner-item {
color:#999;
float: left;
width: 130px;
height: 26px;
line-height: 26px;
}
.inneritemthree {
color:#999;
float: left;
width: 130px;
height: 26px;
line-height: 26px;
}
.outeritemthree{
margin: 10px 20px;
padding: 10px 0;
}
</style>
</head>
<body>
<div class="top-bar-wrapper">
<div class="top-bar clearfix">
<div class="location">
<div class="current-city">
<i class="fas fa-map-marker-alt"></i>
<span class="beijingcolor">北京</span>
</div>
<div class="city-list">
<div class="itembb clearfix">
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
<div class="item">
<a href="#">陕西</a>
</div>
</div>
<div class="outer_item">
<p class="item_title">地区专享版本：</p>
<ul class="itemtwo clearfix">
<li class="inner-item">
<a href="#">中文主站</a>
</li>
<li class="inner-item">
<a href="#"> 中国台湾</a>
</li>
<li class="inner-item">
<a href="#">京东全球</a>
</li>
</ul>
</div>
<div class="outeritemthree">
<p class="itemthreetitle">Available</p>
<ul class="itemthree clearfix">
<li class="inneritemthree">
<a href="#">China</a>
</li>
<li class="inneritemthree">
<a href="#"> kingdom</a>
</li>
<li class="inneritemthree">
<a href="#">Europe</a>
</li>
<li class="inneritemthree">
<a href="#">Africa</a>
</li>
</ul>
</div>
</div>
</div>
<ul class="shortcut clearfix">
<li>
<a href="JavaScript:;">你好，请登录</a>
<a class="hightlight" href="JavaScript:;">免费注册</a>
</li>
<li class="line"></li>
<li><a href="JavaScript:;">我的订单</a></li>
<li class="line"></li>
<li>
<div class="jdbb">
<div class="myjd">
<a href="JavaScript:;">我的京东</a>
<i class="fas fa-angle-down"></i>
</div>
<div class="myjd-list"></div>
</div>
</li>
<li class="line"></li>
<li><a href="JavaScript:;">京东会员</a></li>
<li class="line"></li>
<li>
<div class="qycgbb">
<div class="qycg">
<a class="hightlight" href="javascript:;">企业采购</a>
<i class="fas fa-angle-down"></i>
</div>
<div class="qycg-list"></div>
</div>
</li>
<li class="line"></li>
<li>
<div class="sjbb">
<div class="sj">
<span>商家服务</span>
<i class="fas fa-angle-down"></i>
</div>
<div class="sj-list"></div>
</div>
</li>
<li class="line"></li>
<li>
<div class="wzbb">
<div class="wz">
<span>网址导航</span>
<i class="fas fa-angle-down"></i>
</div>
<div class="wz-list"></div>
</div>
</li>
<li class="line "></li>
<li><a href="JavaScript:;">手机京东</a></li>
<li class="line"></li>
<li><a href="JavaScript:;">网站无障碍</a></li>
</ul>
</div>
</div>
</body>
</html>
204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
