慕课网油画

玄学睡觉大师

于 2021-03-31 11:16:49 发布

阅读量90

点赞数

分类专栏： Java Web

原文链接：www.imoor.com

版权

Java Web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

html (youhua.html)

<!DOCTYPE html>

<head>

</head>

<body >

</div>

</ul>

</div>

<ul>

</ul>

</div>

</div>

<ul>

<li>

<p >78999999999999999999999999999999

99999</p>

</div>

</a>

</div>

</li>

<li>

<p >789999999999999999999999999999999

99999999</p>

</div>

</a>

</div>

</li>

<li>

<p >78999999999999999999999999999999999999

999999</p>

</div>

</a>

</div>

</li>

<li>

<p >78999999999999999999999999999999999999

9999</p>

</div>

</a>

</div>

</li>

<li>

<p >7899999999999999999999999999999999999

99999</p>

</div>

</a>

</div>

</li>

<li>

<p >789999999999999999999999999999999

999999</p>

</div>

</a>

</div>

</li>

</ul>

</div>

<ul >

</ul>

</div>

<p><span>我简单的急</span>啊爱神的箭哪家快递爱睡觉的江口</p>

</div>

</body>

</html>

js (youhua.js)

var flag=ture;

function show_menu(){

var menu1=document.getElementById("menu1");

if(flag){

menu1.style.display="block";

flag=false;

}else{

menu1.style.display="none";//隐藏

flag=true;

}

//鼠标移开隐藏鼠标移开事件

function show_menu1(){

var menu1=document.getElementById("menu1");

menu1.style.display="none";

flag=true;

}

css (youhua.css)

padding: 0px;

margin: 0px;

}

.header{

margin: 25px auto;/*上右下左*/

width: 1200px;

}

.header .menu ul{

display: none; /*隐藏*/

list-style: none;/*去掉前面小点*/

position:absolute;

width: 80px;

opacity:0.5 ; /*半透明效果*/

background-color: white;

}

.header .menu ul li{

margin-top: 20px;

text-align: center;

}

.header .logo{

float: left;

position: relative;

}

.header .menu{

float: left;

position: relative;

margin-top: 12px;

margin-left: 16px;

}

.header .menu:hover ul{

display: block;}块状显示*/

.header .menu .menu_title{

border-bottom: 1px solid black;

padding-bottom: 20xp;

width: 80px;

text-align:center;/*居中*/

}

text-decoration: none; /*去下划线*/

}

.header .auth{

float: right;

}

.header .auth ul li{

float: left;

margin-right: 70px;

margin-top: 12px;

list-style: none;

}

.content{

width: 1200px;

margin: 25px auto;

}

.content .banner .banner-img{

margin-top: 20px;

}

.content .img-content ul li{

background-color: white;

width: 360px;

float: left;

margin: 0 60px 60px 0;/*外边距*/

list-style: none;

margin-top: 30px;

height: 450px;

box-shadow: 0 0 5px 3px #ccc;/*边框的格式属性设置*/

-webkit-box-shadow: 0 0 5px 3px #ccc;/*对于浏览器的兼容（谷歌）*/

-moz-box-shadow:0 0 5px 3px #ccc;/*火狐*/

}

.content .img-content ul{

width: 1280px;

}

.content .img-content .info .img-btn{

width: 300px;

}

.img-content .info .img-btn .btn{

background-color: red;

width: 60px;

height: 30px;

text-align: center;

border-radius: 5px; /* 圆角矩形(4个角的弯曲程度)*/

float: right;

}

.img-content .info .img-btn .cart img{

width: 25px;

height: 20px;

margin-top: 5px;

}

.img-content .info .img-btn .price{

float: left;

color: red;

font-size: 20px;

}

.img-content .info h3 {

color: red;

margin-top: 20px;

margin-bottom: 20px;

font-size:25px ;/*字体大小*/

}

.img-content .info p{

line-height: 30px;/*行间距*/

margin-bottom: 10px;

}

.img-content .info{

margin-right: 20px;

margin-left: 30px;

}

body{

background-color: #f5f5f5;;

}

.page-nav ul li{

float: left;

margin-right: 20px;

list-style: none;

}

.page-nav{

width: 100%;

height: 60px;

line-height: 60px;/*行高和高度设成一个高度考研实现垂直居中*/

overflow: hidden;/*隐藏溢出处理*/

}

.page-nav ul{

margin: auto;

overflow: hidden;

width: 500px;

}

.fist-page{

border-radius: 50%;/*阴影*/

background-color: #c5c5c5;

padding: 3px 3px;

}

.feet{

width: 1200px;

height: 100px;

border-top: 1px solid rgb(12, 1, 1);

margin: 60px auto;

overflow: hidden;

}

.feet p{

text-align: center;

line-height: 40px;

}

.feet p span{

color: red;

}

box-shadow:1px 2px 3px 4px #ccc inset；

1px 从原点开始，沿x轴正方向的长度（倘若为负值，为沿x轴负方向的长度）；

2px 从原点开始，沿y轴正方向的长度；（倘若为负值，为沿y轴负方向的长度）；

3px 阴影的模糊度，只允许为正值；

4px 阴影扩展半径；

#ccc 阴影颜色；

inset 设置为内阴影（如果不写这个值，默认为外阴影）；

玄学睡觉大师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
慕课网油画

html (youhua.html) <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=devic...
复制链接

扫一扫

专栏目录