实例
body{
background-image: url("http://www.d006.com/style/bg.jpg") ;
}
div[id="head"] {
width: 100%;
padding-top: 10%;
padding-left: 25%;
}
div[id="head"] li {
display: inline-block;
width: 67px;
height: 50px;
color: black;
text-align: center;
background-image: url("/0425/images/zly.jpg") ;
background-size: 67px 50px;
background-repeat: no-repeat;
padding-top: 15px;
}
div[id="left"] {
border: 1px red solid;
width: 100px;
height:300px;
/* padding-left: 25%;*/
margin-left: 25%;
/* background-color: aqua;*/
float: left;
}
div[id="left"] li {
text-align: center;
padding-top: 35%;
color: red;
list-style-type:none;
padding-right: 15%;
float: left;
}
div[id="left"] li:hover {
background-color: forestgreen;
color: aqua;
}
div[id="left"] li:nth-child(3)
{
background-color: black;
}
div[id="center"] {
/* clear: left;*/
float: left;
width: 500px;
height: 300px;
border: 1px blue solid;
background-image: url("/0425/images/15258307613400205.jpg");
background-size: 100% 100%;
}
div[id="center"] form {
padding-top: 10%;
padding-left: 10%;
}
div[id="center"] input:nth-child(3) {
padding-left: 10%;
}
div[id="zhuti"] {
width: 100%;
}
div[div="zhuti"] form :invalid {
color: red;
}
button:hover {
width: 56px;
height: 28px;
background-color: black;
color: white;
}
button {
margin-left: 15%;
width: 56px;
height: 28px;
background-color: #478fa2;
color: white;
}
form>p>:nth-child(1):hover { /* p标签下的第一个元素*/
color: blue;
}
form :focus {
background-color: lightgreen; /*鼠标获取到焦点的时候变色*/
}
form>p>link:first-of-type(2) :{
background-color: lightblue;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="fuxi.css"> <title>学习使我快乐</title> </head> <body> <div id="head"> <ul> <li>首页</li> <li>新闻</li> <li>图片</li> <li>走进我</li> <li>案列</li> <li>关于我们</li> </ul> </div> <div id="zhuti"> <div id="left"> <ul> <li> <a href=""> 学习1</a></li> <li><a href=""> 学习1</a></li> <li><a href=""> 学习1</a></li> <li><a href=""> 学习1</a></li> <li><a href=""> 学习1</a></li> </ul> </div> <div id="center"> <p style="float: right;width: 5px;padding-right:163px">学习使我进步，学习使我快乐</p> <form action="" method="get"> <p style="padding-left: 10px"><label for="username">账号：</label> <input type="username" id="usernmae" placeholder="请输入账号" required min="20" max="50" checked></p> <p style="padding-left: 10px"><label for="password">密码：</label> <input type="passord" id="passord" placeholder="请输入密码" required min="20" max="50" ></p> <link>记住密码:</link> <input type="checkbox" checked> </p> <button type="submit">登录</button> </form> </div> <div id="right"></div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
