纸质卡片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div.card{
width:250px;
text-align: center;
box-shadow: 0 4px 8px 0 rgba(0,0),0 6px 20px 0 rgba(0,0,0,0.3);
border:3px solid gold ;
margin:30px 40px;
}
div.header{
background-color: darkgreen;
color:white;
padding:10px;
font-size: 40px;
}
div.container{
padding:10px;
}
</style>
</head>
<body>
<div class="card">
<div class="header">
<h1>9</h1>
</div>
<div class="container">
<p>June 9,2021</p>
</div>
</div>
</body>
</html>
页面布局
菜鸟教程在线编辑器
疯了，代码不小心删了
响应式表格练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table th{
width:140px;
border-collapse: collapse;
}
table,th,tr,td{
border:1px solid #000000;
text-align: center;
border-spacing: 0px;
}
/* 屏幕宽度和表格宽度不一致，加上滑动出现的效果 */
@media screen and (max-width:500px){
.table-container{
overflow-x: scroll;
}
table {
width:800px;
}
}
</style>
</head>
<body>
<div class="table-container">
<table>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
<th>月薪</th>
<th>大学学校</th>
<th>最高学历</th>
<th>是否入党</th>
<th>健康码</th>
<th>是否需要核酸检测</th>
<th>最近活动轨迹</th>
<tr>
<td>王小二</td>
<td>12</td>
<td>放牛</td>
<td>5元</td>
<td>暂时没有</td>
<td>小学</td>
<td>少先队员</td>
<td>黄码</td>
<td>需要</td>
<td>家-学校-家-放牛</td>
</tr>
<tr>
<td>李小明</td>
<td>15</td>
<td>跟小樱一起念书</td>
<td>4000元</td>
<td>暂时没有</td>
<td>初中</td>
<td>团员</td>
<td>绿码</td>
<td>不需要</td>
<td>家-学校-家 其他地方等</td>
</tr>
<tr>
<td>张三</td>
<td>26</td>
<td>犯罪</td>
<td>0-十几万不等</td>
<td>某本学校</td>
<td>本科</td>
<td>无党派人士</td>
<td>绿码</td>
<td>不需要</td>
<td>监狱</td>
</tr>
<table>
</div>
</body>
</html>自适应练习
这个案列主要是两点，一点是淘宝的flexible.js文件，第二个是rem和px的换算，第三个是图片的大小比例进行换算
【小鹿线】移动端自适应布局-无限适配_哔哩哔哩_bilibili
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="utf-8"> -->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,use-scalable=no">
<title></title>
<script type="text/javascript" src="flexible.js"></script>
<style>
*{margin:0;padding:0;}
html,body,.container{
width:100%;
height:100%;
overflow: hidden;
}
ul{
list-style: none;
}
.container{
display: flex;
flex-direction: column;
}
header{
width:100%;
height:2.083333333333333rem;
}
header img{
width:100%;
height:100%;
}
section{
flex:1;
overflow: scroll;
background-color: #101010;
color:#fff;
}
section .item{
margin:30px;
}
section .item ul{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
section .item ul li{
/* width:50%; */
display: flex;
flex-direction:column;
width:4rem;
height:2.34rem;
margin:5px 0;
font-size:16px;
}
.item-title{
display: flex;
justify-content: space-between;
align-items: center;
}
section .item img{
/* width:4.4rem; */
width:100%;
height:2.34rem;
/* height:100%; */
}
footer{
background-color: #1D1D1F;
}
footer ul{
width:100%;
height:2.133333rem;
display: flex;
justify-content: space-between;
align-items:center;
font-weight:800;
font-size:.4266666px;
color:white;
}
footer ul li{
flex:1;
text-align:center;
}
</style>
</head>
<body>
<div class="container">
<header>
<img src="img/1.jpg">
</header>
<section>
<div class="item">
<div class="item-title">
<h3>马上学习</h3>
<div>更多</div>
</div>
<ul>
<li>
<img src="img/31.png">
<span>学习学习学习</span>
</li>
<li>
<img src="img/31.png">
<span>学习学习学习</span>
</li>
<li>
<img src="img/31.png">
<span>学习学习学习</span>
</li>
<li>
<img src="img/31.png">
<span>学习学习学习</span>
</li>
</ul>
</div>
<div class="item">
<div class="item-title">
<h3>预约学习</h3>
<div>更多</div>
</div>
<ul>
<li>
<img src="img/31.png">
<span>学习学习学习</span>
</li>
<li>
<img src="img/31.png">
<span>学习学习学习</span>
</li>
<li>
<img src="img/31.png">
<span>学习学习学习</span>
</li>
<li>
<img src="img/31.png">
<span>学习学习学习</span>
</li>
</ul>
</div>
<div class="item">
<div class="item-title">
<h3>更多学习</h3>
<div>更多</div>
</div>
<ul>
<li>
<img src="img/31.png">
<span>学习学习学习</span>
</li>
<li>
<img src="img/31.png">
<span>学习学习学习</span>
</li>
<li>
<img src="img/31.png">
<span>学习学习学习</span>
</li>
<li>
<img src="img/31.png">
<span>学习学习学习</span>
</li>
</ul>
</div>
</section>
<footer>
<ul>
<li>首页</li>
<li>在线课程</li>
<li>学习路径</li>
<li>关于我们</li>
</ul>
</footer>
</div>
</body>
</html>计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#A{
width:300px;
height: 364px;
border: 1px solid pink;
}
#B{
width:300px;
height: 80px;
background-color: darkgray;
opacity: 0.4;
line-height: 80px;
}
button{
width: 50px;
height:50px;
border-radius: 50%;
margin-top:10px;
margin: 10px;
border:none;
}
button:hover{
background-color: yellow;
cursor: pointer;
}
#C{
width:120px;
height:50px;
border-radius: 45%;
}
</style>
</head>
<body>
<div id="A">
<div id="B">
请输入文字:
</div>
<button>7</button>
<button>8</button>
<button>9</button>
<button>+</button><br>
<button>4</button>
<button>5</button>
<button>6</button>
<button>-</button><br>
<button>1</button>
<button>2</button>
<button>3</button>
<button>*</button><br>
<button>0</button>
<button id="C">=</button>
<button>/</button>
</div>
</body>
</html>多标签页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul{
width:240px;
right:20px;
}
li{
list-style:none;
float:left;
width:80px;
height:50px;
line-height: 50px;
text-align: center;
}
ul li#a{
background-color:lightblue;
}
ul li#b{
background: palegreen;
}
ul li#c{
background:yellowgreen;
}
div{
width:500px;
height:200px;
line-height: 200px;
position: absolute;
top:66px;
left:48px;
text-align: center;
}
div#A{
background: lightblue;
}
div#B{
background: palegreen;
}
div#C{
background: yellowgreen;
}
</style>
</head>
<body>
<ul>
<li id="a">10元套餐</li>
<li id="b">30元套餐</li>
<li id="c">50元包月</li>
</ul>
<div id="A">10元套餐详情：每月套餐内拨打100分钟，超出部分2毛/分钟</div>
<div id="B">30元套餐详情：每月套餐内拨打300分钟，超出部分1.5毛/分钟</div>
<div id="C">50元包月详情：每月无限量随心打</div>
</body>双竖线菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
display: flex;
flex-direction: column;
}
a {
width:180px;
height:30px;
text-decoration: none;
border-left:10px solid deepskyblue;
border-right: 10px solid deepskyblue;
background-color: lawngreen;
color:black;
margin-bottom: 5px;
text-align: center;
line-height: 30px;
}
a:hover{
border-left:10px solid coral;
border-right:10px solid coral;
color:red;
}
</style>
</head>
<body>
<a href="#">Home</a>
<a href="#">contact</a>
<a href="#">Web Dev</a>
<a href="#">Web Design</a>
<a href="#">Map</a>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#menu{
width:120px;
background-color: #ccc;
font-family: Arial;
font-size: 14px;
padding: 8px;
margin: 0 auto;
}
#menu a,#menu a:visited{
display: block;
background-color: #fff;
padding:4px 8px;
color:#000;
text-decoration:none;
margin:8px 0;
border-left:8px solid #9ab;
border-right:8px solid #9ab;
}
#menua#first,#menu a#last{
margin:0px;
}
#menu a:hover{
color:#f00;
border-left:8px solid #000;
border-right:8px solid #000;
}
</style>
</head>
<body>
<div id="menu">
<a href="#" id="first">Home</a>
<a href="#">contact</a>
<a href="#">Web Dev</a>
<a href="#">Web Design</a>
<a href="#" id="last">Map</a>
</div>
</body>
</html>双斜角横线菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#menu{
width:9em;
margin: 0 auto;
font-family: Arial;
font-size: 14px;
border:solid 1px #aaa;
}
#menu a,#menu a:visited{
display: block;
text-decoration:none;
color:#000;
line-height: 1.4em;
border:0.5em solid #fff;
}
#menu a:hover{
color:#fff;
background-color: #aaa;
border-color:#ddd #aaa;
}
</style>
</head>
<body>
<div id="menu">
<a href="#" id="first">Home</a>
<a href="#">contact</a>
<a href="#">Web Dev</a>
<a href="#">Web Design</a>
<a href="#" id="last">Map</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:120px;
height:220px;
border:1px solid black;
display: flex;
flex-direction: column;
}
a{
text-decoration: none;
color:black;
/* 这里非常重要，就是这里形成了三角行那个块 */
display: block;
border:10px solid white;
}
a:hover{
/* 这里三步也很重要 */
border:15px solid black;
background-color: greenyellow;
border-color:blue greenyellow;
}
</style>
</head>
<body>
<div>
<a href="#">Home</a>
<a href="#">contact</a>
<a href="#">Web Dev</a>
<a href="#">Web Design</a>
<a href="#">Map</a>
</div>
</body>
</html>立体菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#menu{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#menu a,#menu a:visited{
text-decoration: none;
text-align: center;
color:#fff;
display: block;
width:10em;
padding:0.25em;
margin:0.5em auto;
background-color: #8ab;
border:2px solid #fff;
position:relative;
}
#menu a:hover{
top:2px;
left:2px;
border-color:#345 #cde #def #678;
}
</style>
</head>
<body>
<div id="menu">
<a href="#">Home</a>
<a href="#">contact</a>
<a href="#">Web Dev</a>
<a href="#">Web Design</a>
<a href="#">Map</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
display: flex;
flex-direction: column;
width:140px;
}
a{
text-decoration: none;
margin-bottom: 3px;
background-color: deeppink;
height:30px;
line-height: 30px;
text-align: center;
}
a:hover{
position:relative;
top:3px;
left:4px;
}
</style>
</head>
<body>
<div id="menu">
<a href="#">Home</a>
<a href="#">contact</a>
<a href="#">Web Dev</a>
<a href="#">Web Design</a>
<a href="#">Map</a>
</div>
</body>
</html>更多推荐
练习 | css页面练习案例
发布评论