1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 90px;
height: 40px;
margin: auto;
border: 1px solid black;
border-radius: 5px;
background-color: rgb(200, 113, 58);
text-align: center;
cursor: pointer;
}
.sentence::before {
content: "ㄟ(≧◇≦)ㄏ";
color: white;
margin-right: 5px;
}
</style>
</head>
<body>
<div class="box sentence" ><span style="font-size: 42; color: aliceblue;">立即下载</span></div>
</body>
</html>2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2</title>
<style>
.box{
width: 1000px;
height: 500px;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<table>
<tr>
<td colspan="3"><h3>关键特征</h3>
</td>
</tr>
<tr>
<td><img style="width: 300px;" src="img/1.png"></td>
<td><img style="width: 300px;" src="img/2.png"></td>
<td><img style="width: 300px;" src="img/3.png"></td>
</tr>
<tr>
<td>恰到好处的简单</td>
<td>为性能重新打造</td>
<td>记事本功能</td>
</tr>
<tr>
<td><span style="font-size: 12px; color: #8f8d8d;">简单，在于外观，更在于体验。所以你一定会喜欢全新的
Foxmail，它会给你简洁畅快的使用感受，而不需要过多的思考压力。恰到好处的简单，你一用便知。</span></td>
<td><span style="font-size: 12px; color: #8f8d8d;">我们视性能高于一切。你之所以选择Foxmail，也一定是因为它够快，够稳定，值得信赖。
现在全新的Foxmail 更是要挑战百万级的海量邮件存储，而且，它做到了。</span></td>
<td><span style="font-size: 12px; color: #8f8d8d;">使用Foxmail的记事本功能，你可以边工作边记录，轻松整理有用的信息。
Foxmail会为你同步到网页、手机端的 QQMail记事本，随时随地供你使用。</span></td>
</tr>
</table>
</div>
</div>
</body>
</html>3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉菜单</title>
<link rel="stylesheet" href="css/commom.css">
<link rel="stylesheet" href="css/reset.css">
</head>
<body>
<ul class="menu">
<li style="width: 300px;">
<span style="color: aliceblue;" font>百度游戏|乐玩</span>
</li>
<li><a href="#">首页</a>
<ol>
<li><a href="#">子页</a></li>
<li><a href="#">子页</a></li>
</ol>
</li>
<li><a href="#">商城</a></li>
<li><a href="#">页游</a></li>
<li><a href="#">排行榜</a></li>
<li><a href="#">繁星计划</a></li>
</ul>
</body>
</html>
.menu{
width: 1300px;
height: 50px;
/* border: 1px saddlebrown solid; */
margin: auto;
}
.menu li {
width: 200px;
/* border: 1px salmon solid; */
float: left;
font-size: 20px;
background-color: #242834;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.menu li:hover{
background-color: rgb(84, 81, 81);
}
.menu li a {
color: rgb(220, 216, 216);
text-decoration: none;
}
.menu ol > li {
background-color: rgb(127, 125, 125);
}
.menu > li > ol {
display: none;
}
.menu > li:hover ol {
display: block;
}
4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3</title>
<style>
.box1{
width: 900px;
height: 300px;
margin: auto;
border: 1px solid rebeccapurple;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
box-shadow: 0px -9px 9px #f979f7,
0px 9px 9px rgb(188, 188, 188) ;
display: flex;
}
.left, .center, .right {
flex: 1; /* 将三个小块平均分配宽度 */
text-align: center;
}
.left {
border-right: 1px solid black;
height: 300px;}
.center {
border-right: 1px solid black;
height: 300px;}
.right {
height: 300px;}
.box2{
width: 150px;
height: 40px;
margin: auto;
border: 1px solid rebeccapurple;
border-radius: 10px;
}
.sentence1::before {
content: "✔"; /* 设置伪元素的内容为对号 */
color: purple; /* 设置颜色为紫色 */
margin-right: 5px; /* 设置右边距 */
}
.sentence2::before {
content: "×"; /* 设置伪元素的内容为对号 */
color: purple; /* 设置颜色为紫色 */
margin-right: 5px; /* 设置右边距 */
}
</style>
</head>
<body>
<div class="box1">
<div class="left">
<span style="font-size: 27px;">bootstrap v3</span>
<h5 style="color: darkgray;" class="sentence1">支持IE8+浏览器</h5>
<h5 style="color: darkgray;" class="sentence2">依赖jQery</h5>
<div class="box2">
<span style="font-size: 12px; color: #f979f7;">bootstrap v3中文文档</span>
</div>
</div>
<div class="center">
<span style="font-size: 27px;">bootstrap v4</span>
<h5 style="color: darkgray;" class="sentence1">支持IE10+浏览器</h5>
<h5 style="color: darkgray;" class="sentence1">支持Flexbox布局</h5>
<h5 style="color: darkgray;" class="sentence1">不依赖jQery</h5>
<div class="box2">
<span style="font-size: 12px; color: #f979f7;">bootstrap v4中文文档</span>
</div>
</div>
<div class="right">
<span style="font-size: 27px;">bootstrap v5</span>
<h5 style="color: darkgray;" class="sentence1">支持Flexbox布局</h5>
<h5 style="color: darkgray;" class="sentence1">支持Grid布局</h5>
<h5 style="color: darkgray;" class="sentence1">支持Css自定义布局</h5>
<h5 style="color: darkgray;" class="sentence1">不依赖jQery</h5>
<h5 style="color: darkgray;" class="sentence2">不支持IE浏览器</h5>
<div class="box2">
<span style="font-size: 12px; color: #f979f7;">bootstrap v5中文文档</span>
</div>
</div>
</div>
</body>
</html>5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>5</title>
<style>
body{
display: flex;
justify-content: center; /* 水平居中 */
}
.box{
width: 200px;
height: 230px;
border: 1px solid black;
border-radius: 20px;
overflow: hidden;/*颜色适应框*/
display: flex;
flex-direction: column;/*垂直排列*/
margin: 10px;
/* display: inline-block; */
}
.top{
flex: 4;
text-align: center;
}
.bottom{
flex: 6;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div class="top" style="background-color: #2aaaf5;">
<span style="color: white; font-size: 32px;">React</span>
</div>
<div class="bottom">
<h5 style="color: rgb(113, 172, 172);">React</h5>
<span style="font-size: 10px;">React起源于Facebook内部项目,是一个用于构建用户界面的JavaScript库</span>
</div>
</div>
<div class="box">
<div class="top" style="background-color: #c0dcd7;">
<span style="color: black; font-size: 32px;">Vue.js</span>
</div>
<div class="bottom">
<h5 style="color: black">Vue.js</h5>
<span style="font-size: 10px;">vue是一个用于构建用户界面的渐进式框架。与其它大型框架不同的使，Vue
被设计为可以自底向上逐层适应。Vue的核心库只关注图层，不仅易于上手</span>
</div>
</div>
<div class="box">
<div class="top" style="background-color: #2653b6;">
<span style="color: white; font-size: 36px;">TypeScript</span>
<span style="color: white; font-size: 18px;">中文手册</span>
</div>
<div class="bottom">
<h5 style="color: black">TypeScript</h5>
<span style="font-size: 10px;">TypeScript是由微软开源的编程语言。它是JavaScript的一个超集，而且本质上向这个
语言添加了可选的静态类型和基于类的面向对象编程</span>
</div>
</div>
<div class="box">
<div class="top" style="background-color: #24129a;">
<span style="color: white; font-size: 36px;">Bootstrap免费版本</span>
</div>
<div class="bottom">
<h5 style="color: black">Bootstrap免费版本</h5>
<span style="font-size: 10px;">用我们收集的大量优秀的Bootstrap免费模板助力您创建精美的Bootstrap网站！</span>
</div>
</div>
<div class="box">
<div class="top" style="background-color: #dcd73e;">
<span style="color: rgb(6, 6, 6); font-size: 33px;">BABEl</span>
</div>
<div class="bottom">
<h5 style="color: black">Babel</h5>
<span style="font-size: 10px;">Babel是一个JavaScript编译器。Babel通过语法转换器支持最新版本的JavaScript语法。</span>
</div>
</div>
<div class="box">
<div class="top" style="background-color: #8e8c87;">
<span style="color: rgb(0, 0, 0); font-size: 30px;">Tailwind CSS</span>
</div>
<div class="bottom">
<h5 style="color: rgb(0, 0, 0)">Tailwind CSS</h5>
<span style="font-size: 10px;">Tailwind CSS是一个用于快速UI开发的实用工具CSS框架，与Bootstrap，Foundation不同，Tailwind
CSS没有内置的UI组件。完全需要开发者根据</span>
</div>
</div>
<div class="box">
<div class="top" style="background-color: #2c2819;">
</div>
<div class="bottom">
<h5 style="color: black">Alpine.js</h5>
<span style="font-size: 10px;">Alpine.js通过很低成本提供了与Vue或React这类大型框架相近的响应和声明式特性。
Alpine.js的语法几乎完全借用自Vlue。</span>
</div>
</div>
<div class="box">
<div class="top" style="background-color: white;">
<span style="color: black; font-size: 25px;">Redux</span>
</div>
<div class="bottom">
<h5 style="color: black">Redux</h5>
<span style="font-size: 10px;">Redux是JavaScript状态容器，提供可预测化的状态管理，构建一致化的应用，运行与不同的环境
（客户端，服务器，原生应用），并且易于测试。</span>
</div>
</div>
</body>
</html>6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.menu{
width: 426px;
height: 50px;
margin: auto;
border: 1px rgba(47, 46, 48, 0.253) solid;
border-radius: 25px;
overflow: hidden;
}
.menu li{
width: 60px;
float: left;
font-size: 20px;
text-align: center;
line-height: 50px;
cursor: pointer;
border-right: 1px rgba(47, 46, 48, 0.253) solid;
}
.menu li:hover{
background-color: rgb(75, 96, 234);
color: white
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">《</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li ><a href="#">》</a></li>
</ul>
</body>
</html>
扫一扫
166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
