theluyuan/webveuje
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

练习

Browse Source
This commit is contained in:
asd
2021-04-29 17:16:40 +08:00
parent 812be57880
commit 55c598cdb1
195 changed files with 12788 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
teaching/lhj/pro/index.html Normal file
View File

@@ -0,0 +1,143 @@
<!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>Document</title>
<link rel="stylesheet" href="./static/css/index.css">
<script>
function jinru() {
// console.log(233) //打印在控制台上
var nav2 = document.getElementById("nav2");
nav2.style.display = "block"
}
function out() {
var nav2 = document.getElementById("nav2");
nav2.style.display = "none"
}
</script>
</head>
<body>
<div class="navbox">
<div class="left">
<div class="navitem" onmouseover="jinru()" onmouseout="out()">网站导航</div>
<div class="navitem">商家入驻</div>
<div class="navitem">客户服务</div>
</div>
<div class="right">
<div class="navitem">网站导航</div>
<div class="navitem">商家入驻</div>
<div class="navitem">客户服务</div>
<div class="navitem">网站导航</div>
<div class="navitem">商家入驻</div>
<div class="navitem">客户服务</div>
</div>
</div>
<div class="nav2" id="nav2">
<div class="navlist">
<p class="title">特色购物</p>
<ul>
<li>苏宁互联</li>
<li>苏宁卡</li>
<li>易回收</li>
<li>领券中心</li>
<li>导购指南</li>
</ul>
<ul>
<li>苏宁互联</li>
<li>苏宁卡</li>
<li>易回收</li>
<li>领券中心</li>
<li>导购指南</li>
</ul>
</div>
<div class="navlist">
<p class="title">特色购物</p>
<ul>
<li>苏宁互联</li>
<li>苏宁卡</li>
<li>易回收</li>
</ul>
<ul>
<li>苏宁互联</li>
<li>苏宁卡</li>
<li>易回收</li>
<li>领券中心</li>
</ul>
</div>
<div class="navlist">
<p class="title">特色购物</p>
<ul>
<li>苏宁互联</li>
<li>苏宁卡</li>
</ul>
<ul>
<li>苏宁互联</li>
<li>苏宁卡</li>
<li>易回收</li>
</ul>
</div>
<div class="navlist">
<p class="title">特色购物</p>
<ul>
<li>苏宁互联</li>
<li>苏宁卡</li>
<li>易回收</li>
</ul>
<ul>
<li>苏宁互联</li>
</ul>
</div>
<div class="navlist">
<p class="title">特色购物</p>
<ul>
<li>苏宁互联</li>
<li>苏宁卡</li>
<li>易回收</li>
<li>领券中心</li>
<li>导购指南</li>
</ul>
<ul>
<li>苏宁互联</li>
<li>苏宁卡</li>
<li>易回收</li>
<li>领券中心</li>
<li>导购指南</li>
</ul>
</div>
</div>
<div class="top">
<img src="http://image1.suning.cn/uimg/cms/img/159642507148437980.png" alt="" class="logo">
<div class="searchright">
<div class="searchbox">
<div class="searchicon"></div>
<input type="text" class="shuru">
<div class="btn">搜索</div>
</div>
<div class="searchcontent">
<div class="left">
<p class="title">最近搜索</p>
<img src="./static/img/logo.png" alt="" class="sun">
<p class="tishi">您还没有探索到这里</p>
</div>
<div class="right">
</div>
</div>
</div>
yyyy
</div>
</body>
</html>

7
teaching/lhj/pro/note.md Normal file
View File

@@ -0,0 +1,7 @@
# css
引入方式：
1. 行内样式 <p style="">
2. 内联样式 style
3. 外部样式 link
css 使用的第一步是初始化样式 用 * （通配符）

168
teaching/lhj/pro/static/css/index.css Normal file
View File

@@ -0,0 +1,168 @@
*{
margin:0;
padding:0;
}
.navbox{
width: 100%;
height: 36px;
background: #f5f5f5;
display: flex;
justify-content:space-between
}
.navbox .left{
margin-left: 30px;
}
.navbox .right{
margin-right: 40px;
}
.navbox .left, .right{
/* width: 343px; */
height: 100%;
display: flex;
/* float: left; */
}
.navbox .right{
/* width: 647px; */
height: 100%;
/* background: blue; */
/* float: right; */
}
.navbox .left .navitem, .right .navitem{
font-size: 12px;
line-height: 36px;
padding:0 10px;
cursor: pointer;
/* cursor: default; */
}
.navbox .left .navitem:hover, .right .navitem:hover{
color: #F60;
background: white;
}
.nav2{
width: 890px;
/* height: 242px; */
border: 1px solid #ddd;
border-top: none;
margin-left: 30px;
overflow: auto;
padding:20px 0;
display: none;
position: absolute;
z-index: 10000000000;
background: white;
}
.title{
color:#333;
font-size: 14px;
padding-left: 18px;
}
.navlist{
float: left;
padding-right: 40px;
border-right:1px solid #ddd;
}
.nav2 .navlist:last-child{
border-right: none;
}
.nav2 ul li{
font-size: 12px;
color: #333;
list-style: none;
}
.nav2 ul{
float: left;
margin-left: 20px;
}
.top{
margin-left: 30px;
display: flex;
align-items: center;
position: relative;
box-sizing: border-box;
/* 定义交叉轴对齐方式 */
/* border: 1px solid red; */
}
.searchbox{
width: 540px;
height: 40px;
border: 2px solid #ff8000;
display: flex;
border-radius: 20px;
/* position: absolute;
top:20px */
/* float: left; */
/* 第一个是左上 第二个是右上 第三个是右下 第四个是左下 */
}
.logo{
width:190px;
height: 90px;
margin-right:30px;
float: left;
position: absolute;
top: 20px;
}
.searchright{
margin-left: 300px;
position: relative;
top: 30px;
box-sizing: border-box;
}
.searchicon{
width: 15px;
height: 36px;
background: #ddd;
margin-left: 20px;
}
.shuru{
width: 390px;
height: 36px;
border: none;
outline: none;
padding-left: 10px;
}
.btn{
width: 120px;
height:40px;
background: #ff8000;
color:white;
text-align: center;
line-height: 40px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.searchcontent{
width: 540px;
border: 1px solid red;
box-sizing: border-box;
}
.searchcontent .left{
width: 251px;
height: 269px;
border:1px solid gray;
box-sizing: border-box;
}
.left .title{
width:100%;
height: 30px;
background: #ddd;
line-height: 30px;
color: #999;
box-sizing: border-box;
}
.sun{
width:80px;
height:80px;
margin-left: 30%;
margin-top:10%;
margin-bottom: 20px;
}
.tishi{
color: #ddd;
text-align:center;
}

BIN
teaching/lhj/pro/static/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB