HTML5+CSS3(六)
6.1 图片和文字混排
图片和文字排列在一起的时候,图片会占据一整行.如需文字和图片并排在一起,则对图片设置浮动属性float:left float:right
6-2 overflow、text-overflow属性介绍
overflow 和 text-overflow 是用来控制文本溢出的样式属性。
overflow 属性控制元素的溢出内容如何处理，包括可见滚动条、隐藏滚动条或截断溢出内容等。它有以下几个值：
visible（默认值）：内容不会被修剪，会呈现在元素框之外。hidden：内容会被修剪，超出部分不会被显示。scroll：内容会被修剪，超出部分会带有滚动条显示。auto：浏览器决定如何显示内容，可能带有滚动条。
text-overflow 属性用于设置当元素中文本溢出容器时，如何显示溢出的内容。它只有在 white-space: nowrap 和 overflow: hidden 时才会生效。它有以下几个值：
clip：默认值，内容会被截断，看不到溢出的部分。ellipsis：用省略号代表截断的部分，适合长文本的溢出处理。<string>：用自定义字符串代表截断的部分，可以用于多语言场景。
举个例子：
div {
width: 100px;
height: 30px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}上述样式设置了一个宽度为 100 像素，高度为 30 像素的 div 元素，当 div 内容溢出时，超出部分会被隐藏并用省略号代替。
6.3 纯CSS制作选项卡
/选项卡01.gif)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box{
width: 300px;
height: 150px;
border: 1px solid #ddd;
overflow: hidden;/*超出的部分隐藏*/
}
.list{
width: 300px;
height: 150px;
line-height: 150px;
background-color: #ddd;
font-size: 80px;
text-align: center;
}
.anchor{
width: 300px;
padding-top:10px ;
text-align: right;
}
.click{
display: inline-block;
width: 30px;
hanging-punctuation: 30px;/* 控制文本中标点符号的对齐方式 */
line-height: 30px;
border: 1px solid #ccc;
background: #f7f7f7;
color: #333;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration: none;/*去掉下划线*/
}
.click:hover{
background: #eee;
}
</style>
<title></title>
</head>
<body>
<div class="box">
<div class="list" id="one">1</div>
<div class="list" id="two">2</div>
<div class="list" id="three">3</div>
<div class="list" id="four">4</div>
</div>
<div class="anchor">
<a class="click" href="#one">1</a>
<a class="click" href="#two">2</a>
<a class="click" href="#three">3</a>
<a class="click" href="#four">4</a>
</div>
</body>
</html> /选项卡02.gif)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#box{
width: 300px;
height: 25px;
}
#tab_nav{
margin: 0;
padding: 0;
height: 25px;
line-height: 24px;
}
#tab_nav li{
float: left;
margin: 0 10px 0 0;
list-style: none; /* 去掉有序列表的点 */
border: 1px solid #999;
border-bottom: none; /* 不要下边框 */
height: 24px;
width: 60px;
text-align: center;
}
#tab_content{
width: 300px;
height: 150px;
border: 1px solid #999;
text-align: center;
overflow: hidden;
}
#t_1,#t_2,#t_3{
width: 100%;
height: 150px;
}
</style>
<title></title>
</head>
<body>
<div id="box">
<ul id="tab_nav">
<li>
<a href="#t_1">tab_1</a>
</li>
<li>
<a href="#t_2">tab_2</a>
</li>
<li>
<a href="#t_3">tab_3</a>
</li>
</ul>
</div>
<div id="tab_content">
<div id="t_1">tab_1</div>
<div id="t_2">tab_2</div>
<div id="t_3">tab_3</div>
</div>
</body>
</html>6.4 横向菜单栏
/横向菜单栏.gif)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul{
list-style: none;
}
li{
float: left;
}
a{
display: block; /* 将a转为块级元素 */
width: 200px;
background-color: gray;
color: white;
text-align: center;
padding: 6px;
text-decoration: none;
}
a:hover{
color: black;
background-color: red;
}
</style>
<title></title>
</head>
<body>
<h3>横向菜单栏</h3>
<ul>
<li><a href="#">导航一号</a></li>
<li><a href="#">导航二号</a></li>
<li><a href="#">导航三号</a></li>
<li><a href="#">导航四号</a></li>
</ul>
</body>
</html>6.5 带有背景图像的横向菜单
/横向菜单栏带图片.gif)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul,li{
padding: 0;
margin: 0;
}
ul{
list-style: none;
height: 45px;
line-height: 45px;
background-color: #efefef;
width: 960px;
border-right: 1px solid #ccc;
}
li{
float: left;
}
a{
display:block;
width:239px;
color:#000;
text-decoration: none;
background-image: url("img/home.png");
background-repeat: no-repeat;
background-position: 60px 10px;
text-indent: 100px;
border-top: 1px solid #ccc ;
border-bottom: 1px solid #ccc ;
border-left: 1px solid #ccc ;
}
a:hover{
background-color: #ccc;
}
</style>
<title></title>
</head>
<body>
<ul>
<li><a href="#">导航一号</a></li>
<li><a href="#">导航二号</a></li>
<li><a href="#">导航三号</a></li>
<li><a href="#">导航四号</a></li>
</ul>
</body>
</html>6.6 只有标题的新闻列表
/新闻标题.gif)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul{
list-style:none;
width:350px;
}
li{
margin: 0;
padding: 0;
}
a{
display: block;
height: 40px;
line-height: 40px;
text-decoration:none;
border-bottom: 1px dashed #888;
background-image: url("img/li.png");
background-repeat: no-repeat;
background-position: 5px 13px;
padding-left: 30px;
color: #000;
}
a:hover{
background-color: #efefef;
cursor: pointer;
}
</style>
<title></title>
</head>
<body>
<ul>
<li><a href="#">这里是新闻列表</a></li>
<li><a href="#">这里是新闻列表</a></li>
<li><a href="#">这里是新闻列表</a></li>
<li><a href="#">这里是新闻列表</a></li>
<li><a href="#">这里是新闻列表</a></li>
</ul>
</body>
</html>6-7 带有标题和日期的新闻列表
/新闻标题2.gif)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul,li{
margin: 0;
padding: 0;
}
ul{
list-style:none;
width:350px;
}
a{
display: block;
height: 40px;
line-height: 40px;
color: #000;
text-decoration:none;
border-bottom: 1px dashed #888;
background-image: url("img/li.png");
background-repeat: no-repeat;
background-position: 5px 13px;
padding-left: 30px;
}
a:hover{
background-color: #efefef;
cursor: pointer;
}
.date{
float: right;
}
</style>
<title></title>
</head>
<body>
<ul>
<li><a href="#">这里是新闻列表<span class="date">2023-03-10</span></a></li>
<li><a href="#">这里是新闻列表<span class="date">2023-03-10</span></a></li>
<li><a href="#">这里是新闻列表<span class="date">2023-03-10</span></a></li>
<li><a href="#">这里是新闻列表<span class="date">2023-03-10</span></a></li>
<li><a href="#">这里是新闻列表<span class="date">2023-03-10</span></a></li>
</ul>
</body>
</html>6-8 新闻图文混排列表
/image-20230313134559993.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{font-size: 12px;}
a{
text-decoration: none;
color: #356AA0;
}
img{
width: 150px;
height:100px;
border-radius: 8px; /* 圆角 */
}
.clear{clear: both;}
ul{list-style: none;}
ul li{
border-bottom: 1px dashed;
padding: 10px;
width: 560px;
position:relative;
}
.left{
width:150px ;
height: 100px;
float: left;
}
.right{
width: 350px;
height: 100px;
margin-left: 10px;
float: right;
}
.title{
width: 290px;
hanging-punctuation: 20px;
line-height: 20px;
font-weight: bold;
float: left;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
/*文本过长缩略*/
}
.date{
width: 60px;
color: #888888;
float: right;
}
.contert{
width: 350px;
height: 80px;
line-height: 1.6em;/*设置内容每行文字的高度*/
float: left;
padding-left:5px ;
padding-top:5px ;
text-align: justify;/*文本分散对齐*/
word-wrap: break-word;
overflow-wrap: break-word;
overflow: hidden;/*超出隐藏*/
}
.more{
float: right;
position: absolute;
right: 0px;
bottom: 0px;
}
</style>
<title></title>
</head>
<body>
<ul>
<li>
<!-- 左边开始 -->
<div class="left">
<a href="#"><img src="img/h5.jpg"></a>
</div>
<!-- 左边结束 -->
<!-- 右边开始 -->
<div class="right">
<div class="title">
<a href="#">HTML5究竟是什么定义阐述HTML5究竟是什么定义阐述</a>
</div>
<div class="date">
03-10
</div>
<div class="contert">
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项推荐标准、外语原文：W3C Recommendation、见本处参考资料原文内容）。2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。
<a href="#" class="more">more</a>
</div>
</div>
<!-- 右边结束 -->
<div class="clear"></div>
</li>
<li>
<!-- 左边开始 -->
<div class="left">
<a href="#"><img src="img/h5.jpg"></a>
</div>
<!-- 左边结束 -->
<!-- 右边开始 -->
<div class="right">
<div class="title">
<a href="#">HTML5究竟是什么定义阐述HTML5究竟是什么定义阐述</a>
</div>
<div class="date">
03-10
</div>
<div class="contert">
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项推荐标准、外语原文：W3C Recommendation、见本处参考资料原文内容）。2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。
<a href="#" class="more">more</a>
</div>
</div>
<!-- 右边结束 -->
<div class="clear"></div>
</li>
<li>
<!-- 左边开始 -->
<div class="left">
<a href="#"><img src="img/h5.jpg"></a>
</div>
<!-- 左边结束 -->
<!-- 右边开始 -->
<div class="right">
<div class="title">
<a href="#">HTML5究竟是什么定义阐述HTML5究竟是什么定义阐述</a>
</div>
<div class="date">
03-10
</div>
<div class="contert">
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项推荐标准、外语原文：W3C Recommendation、见本处参考资料原文内容）。2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。
<a href="#" class="more">more</a>
</div>
</div>
<!-- 右边结束 -->
<div class="clear"></div>
</li>
</ul>
</body>
</html>6-9 缩略图列表
/image-20230313135305100.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul.imglist{
width: 536px;
}
ul.imglist li{
list-style: none;
float: left;
width: 160px;
padding: 5px;
}
ul.imglist li img{
width: 160px;
height: 90px;
}
ul.imglist li span{
height: 30px;
line-height: 30px;
text-align: center;
display: block;
}
</style>
<title></title>
</head>
<body>
<ul class="imglist">
<li>
<a href="#"><img src="img/b.png" alt=""></a>
<span>HTML5标准规范</span>
</li>
<li>
<a href="#"><img src="img/b.png" alt=""></a>
<span>HTML5标准规范</span>
</li>
<li>
<a href="#"><img src="img/b.png" alt=""></a>
<span>HTML5标准规范</span>
</li>
<li>
<a href="#"><img src="img/b.png" alt=""></a>
<span>HTML5标准规范</span>
</li>
<li>
<a href="#"><img src="img/b.png" alt=""></a>
<span>HTML5标准规范</span>
</li>
<li>
<a href="#"><img src="img/b.png" alt=""></a>
<span>HTML5标准规范</span>
</li>
</ul>
</body>
</html>6-10 登陆界面1
/image-20230313144939684.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
margin: 0;
padding: 0;
background-color: #30b58a;
color:#717171;
font-size: 12px;
font-family: "comic sans ms";
}
a{
color:#717171 ;
}
ul{
list-style: none;
}
li{
padding: 10px 0px;
}
input{
border: none;
}
#container{
width: 450px;
height: 500px;
position: absolute;
left:50%;
top:50%;
margin-left: -225px;
margin-top:-250px ;
}
header{
background-image: url("img/1/head.png");
width: 199px;
height: 198px;
margin: 0 auto;
}
#logon{
width:350px;
height:240px;
background-color: white;
position: relative;
text-align: center;
margin: 30px auto 0px auto;
}
.triangle_up{
width: 0px;
height: 0px;
border-bottom: 20px solid #ffffff;
border-left:20px solid transparent;
border-right: 20px solid transparent;
position: absolute;
top: -20px;
left:155px;
}
input.user{
background-image: url("img/1/user.png");
width: 200px;
height: 30px;
background-color: #ededed;
background-repeat: no-repeat;
padding: 5px 5px 5px 50px;
background-position: left top;
color:#878787;
}
input.pwd{
background-image: url("img/1/pwd.png");
width: 200px;
height: 30px;
background-color: #ededed;
background-repeat: no-repeat;
padding: 5px 5px 5px 50px;
background-position: left top;
color:#878787;
}
input.submit{
background-color: #ffde13;
color:#514c53;
width: 220px;
height: 35px;
padding: 5px;
}
</style>
<title></title>
</head>
<body>
<form action="">
<div id="container">
<header></header>
<div id="logon">
<div class="triangle_up"></div>
<ul>
<li><input type="text" class="user" placeholder="Username"></li>
<li><input type="password" class="pwd" placeholder="Password"></li>
<li><input type="submit" class="submit" value="LOGIN"></li>
<li>Forfet Pasword?
<a href="#">Click Here</a>
</li>
</ul>
</div>
</div>
</form>
</body>
</html>6-11
/image-20230313163940116.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
margin: 0px;
padding: 0px;
background-image: url("img/2/bg2.jpg");
color:#596774;
font-size: 14px;
}
#container{
width: 500px;
height: 300px;
position: absolute;
background-color: white;
left:50%;
top:50%;
margin-left: -250px;
margin-top:-150px ;
}
header{
background-color: #242b31;
height: 80px;
line-height: 80px;
}
#logo{
color:#5a6674;
font-size:32px;
margin-left: 25px;
float: left;
}
#forgot{
float: right;
margin-right: 25px;
font-size: 14px;
}
#forgot a{
color:#586877;
}
ul{
margin: 0px;
padding: 0px;
list-style: none;
}
ul.top li{
margin: 0px;
padding: 0px;
float: left;
width: 121px;
border: 2px;
}
ul.top li.blue{
background-color: #37bde0;
border-style: solid;
}
ul.top li.red{
background-color: #e24a49;
border-style: solid;
}
ul.top li.green{
background-color: #55bd80;
border-style: solid;
}
ul.top li.orange{
background-color: #f0a94d;
border-style: solid;
}
ul.logon{
width: 300px;
margin: 10px auto;
}
ul.logon li{
margin: 10px 0px;
}
input.user{
background-image: url("img/2/user.png");
width: 250px;
height: 20px;
background-repeat: no-repeat;
background-position:15px center;
padding: 5px 5px 5px 50px;
border: 1px solid #d2dbe2;
color:#bfdbe2;
}
input.pwd{
background-image: url("img/2/pwd.png");
width: 250px;
height: 20px;
background-repeat: no-repeat;
background-position:15px center;
padding: 5px 5px 5px 50px;
border: 1px solid #d2dbe2;
color:#bfdbe2;
}
.stay{
float: left;
height: 35px;
line-height: 35px;
margin-top: 10px;
}
input.submit{
float: right;
background-color: #37bde0;
width: 150px;
height: 35px;
border:none;
color:#242b31;
margin-top: 10px;
}
</style>
<title></title>
</head>
<body>
<form action="">
<div id="container">
<ul class="top">
<li class="blue"></li>
<li class="red"></li>
<li class="green"></li>
<li class="organge"></li>
</ul>
<header>
<div id="logo">ADMIN</div>
<div id="forgot">
<a href="#">Forgot Password?</a>
</div>
</header>
<ul class="logon">
<li>Username</li>
<li><input type="text" placeholder="Username" class="user"></li>
<li>Password</li>
<li><input type="password" placeholder="Password" class="pwd"></li>
<li><div class="stay"><input type="checkbox">Stay loged in</div>
<input type="submit" class="submit" value="LOGIN">
</li>
</ul>
</div>
</form>
</body>
</html>6-12
/image-20230314105335513.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
margin:0px;
padding:0px;
background-image: url("img/3/timg.jpg");
color:#757575;
font-size:12px;
}
ul{
list-style: none;
}
ul,li,h1,h2,h3,h4,h5,h6,input{
margin: 0px;
padding: 0px;
}
li{
margin-bottom: 10px;
}
#container{
width:450px;
height:200px;
position: absolute;
background-color: white;
top:50%;
left:50%;
margin-top: -255px;
margin-left: -150px;
box-shadow: 10px 10px 5px #000000; /* 阴影 */
padding:30px;
border-radius: 10px;
}
#logon{
width: 280px;
height: 200px;
float: left;
border-right: 1px dotted #989898; /* 右边虚线 */
}
.header{
background-image: url("img/3/header.png");
background-repeat: no-repeat;
padding: 10px 60px;
}
h2{
color:#232323;
font-family: "黑体";
font-size:18px;
}
h5{
color:#656565;
font-family: "黑体";
font-size:8px;
}
input.user{
border: 1px solid #e7e5e6;
width: 230px;
height: 20px;
color:#a4a4a4;
padding: 5px 10px;
}
input.pwd{
border: 1px solid #e7e5e6;
width: 230px;
height: 20px;
color:#a4a4a4;
padding: 5px 10px;
}
.stay{
float: left;
}
.forgot{
margin-left: 160px;
}
.forgot a{
color:#757575;
text-decoration: none;
}
input.submit{
background-color: #0c8bd8;
width: 120px;
height: 35px;
border: none;
color:#ffffff;
}
#info{
width: 140px;
height: 180px;
padding: 10px 0px 10px 20px;
float: right;
}
.noaccount{
font-family: "黑体";
font-size: 14px;
}
.reg{
margin-top: 5px;
}
.reg a{
font-family: "黑体";
font-size: 13px;
color:#0d86d5;
text-decoration: none;
}
.account{
margin-top: 30px;
font-family: "黑体";
font-size: 14px;
}
.direct{
margin-top: 10px;
text-align: center;
}
.sina{
border: 3px solid #f35846;
margin-right: 10px;
padding: 5px;
border-radius: 30px;
}
.qq{
border: 3px solid #f35846;
margin-right: 10px;
padding: 5px;
border-radius: 30px;
}
</style>
<title></title>
</head>
<body>
<form action="">
<div id="container">
<div id="logon">
<ul>
<li class="header">
<h2>用户账户登录</h2>
<h5>YHE ACCOUNT LOGIN</h5>
</li>
<li><input type="text" placeholder="请输入账号" class="user"></li>
<li><input type="password" placeholder="请输入密码" class="pwd"></li>
<li>
<div class="stay"><input type="checkbox">记住我</div>
<div class="forgot"><a href="#">忘记密码</a></div>
</li>
<li><input type="submit" class="submit" value="登 录"></li>
</ul>
</div>
<div id="info">
<div class="noaccount">您还没有账号</div>
<div class="reg">
<a href="#">立即注册</a>
</div>
<div class="account">使用以下账户登录</div>
<div class="direct">
<a href="#"><img src="img/3/sina.png" alt="" class="sina"></a>
<a href="#"><img src="img/3/qq.png" alt="" class="qq"></a>
</div>
</div>
</div>
</form>
</body>
</html>6-21
lib-flexible是适配不同大小终端的开源库，HTML头部引入lib-flexible的js库，容器或组件宽高主要使用单位rem，字体大小则不变仍然使用单位px。
lib-flexible开源库官网：
