abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .release{ border:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.release{
border: 5px solid pink;
border-radius: 10px;
padding: 10px;
margin-top: 6px;
width: 600px;
}
.release div{
height: 24px;
width: 100%;
}
.release div span{
display: block;
height: 24px;
line-height: 24px;
float: right;
margin-right: 10px;
font-size: 14px;
}
.release div span i{
font-size: 16px;
font-weight: bold;
}
.btxt{
width: 190px;
background: pink;
}
.btxt input{
width: 150px;
}
#txt{
width: 100%;
height: 160px;
border:1px solid #ccc;
}
.release .but-div{
margin-bottom: 5px;
height: 30px;
}
.but-div p{
width: 55px;
height: 30px;
line-height: 30px;
float: left;
padding-right: 10px;
text-align: right;
}
.release .but-div .p1{
background: url(../images/an5.png) no-repeat left center;
}
.release .but-div .p2{
background: url(../images/an4.png) no-repeat left center;
}
.release .but-div .p3{
background: url(../images/an3.png) no-repeat left center;
}
.release .but-div .p4{
background: url(../images/an2.png) no-repeat left center;
}
.release .but-div .p5{
width: 80px;
background: url(../images/an1.png) no-repeat left center;
}
.p6{
float: right;
margin-left: 50px;
}
#btn{
width: 100px;
height: 30px;
border:none;
background: pink;
border-radius: 5px;
line-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<div>
<div><img src="images/12.png" alt="新鮮事"><span>還可以輸入<i id="q1"></i>個(gè)字節(jié)</span></div>
<p>標(biāo)題：<input type="text"></p>
<textarea id="txt"></textarea>
<div>
<p>表情</p>
<p>圖片</p>
<p>視頻</p>
<p>話題</p>
<p>長(zhǎng)微博</p>
<p><input type="checkbox" name="gk" id="gk"><label for="gk">公開</label></p>
<button id="btn">發(fā)布</button>
</div>
</div>
</body>
</html>由于圖片的關(guān)系，這部分顯示的和我電腦上有點(diǎn)出入
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="keywords" content="關(guān)鍵字列表"/> <meta name="description" content="網(wǎng)頁(yè)描述"/> <title>我的設(shè)計(jì)</title> <link rel="stylesheet" href="style/my.css" type="text/css"> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/my.js"></script> </head> <body > <!--頭部--> <header> <div> <div> <span id="txt"></span> <span>我在這里等待你的到來(lái)！</span> <form action=""> <input type="text"> </form> <div> <button id="bt1">登陸</button> <button id="bt2">注冊(cè)</button> </div> </div> <nav> <ul id="ul1"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JS</a></li> <li><a href="#">JAVA</a></li> <li><a href="#">VUE</a></li> <li><a href="#">Bootstrap</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">PHP</a></li> </ul> </nav> </div> </header> <!--主題--> <div id="count"> <div> <a href="#"><img src="images/img1.jpg" id="m1" alt=""></a> </div> <div> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div> <div> <div> <div> <p><input type="checkbox" name="check"><a href="#">選擇框的運(yùn)用</a><i>發(fā)布時(shí)間:2018-12-28</i></p> <p><input type="checkbox" name="check"><a href="#">選擇框的運(yùn)用</a><i>發(fā)布時(shí)間:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">選擇框的運(yùn)用</a><i>發(fā)布時(shí)間:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">選擇框的運(yùn)用</a><i>發(fā)布時(shí)間:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">選擇框的運(yùn)用</a><i>發(fā)布時(shí)間:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">選擇框的運(yùn)用</a><i>發(fā)布時(shí)間:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">選擇框的運(yùn)用</a><i>發(fā)布時(shí)間:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">選擇框的運(yùn)用</a><i>發(fā)布時(shí)間:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">選擇框的運(yùn)用</a><i>發(fā)布時(shí)間:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">選擇框的運(yùn)用</a><i>發(fā)布時(shí)間:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">選擇框的運(yùn)用</a><i>發(fā)布時(shí)間:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">選擇框的運(yùn)用</a><i>發(fā)布時(shí)間:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">選擇框的運(yùn)用</a><i>發(fā)布時(shí)間:2018-12-29</i></p> <p> <input type="checkbox" id="allBox" onclick=" checkAll()"><label for="allBox"><span id="xq">全選</span></label> <input type="checkbox" id="noBox" onclick="noCheck()"><label for="noBox">反選</label> </p> </div> </div> <div> <div><img src="images/12.png" alt="新鮮事"><span>還可以輸入<i id="q1"></i>個(gè)字節(jié)</span></div> <p>標(biāo)題：<input type="text"></p> <textarea id="txt"></textarea> <div> <p>表情</p> <p>圖片</p> <p>視頻</p> <p>話題</p> <p>長(zhǎng)微博</p> <p><input type="checkbox" name="gk" id="gk"><label for="gk">公開</label></p> <button id="btn">發(fā)布</button> </div> </div> </div> </div> <!--底部--> <footer> <div> <div></div> <p>用戶協(xié)議 隱私策略 投訴中心 京公網(wǎng)安備11000002000001號(hào) 互聯(lián)網(wǎng)新聞信息服務(wù)許可 ©2018GongZi 使用前必讀</p> </div> </footer> </body> </html>
*{
margin: 0px;
padding: 0px;
}
body{
background-color: #333;
font-size: 12px;
}
ul{
list-style: none;
}
header{
width: 100%;
background-color: #000;
overflow: hidden;
}
header div{
width: 960px;
margin: 5px auto;
}
header div .td{
width: 960px;
height: 24px;
background-color: #222;
}
header div nav{
width: 960px;
height: 40px;
background-color: #fff;
}
header div.td span {
width: 300px;
height: 24px;
line-height: 24px;
text-align: center;
font-size: 18px;
color: red;
font-family: "微軟雅黑";
padding-left: 15px;
}
.fo{
float: right;
width: 180px;
margin: 0;
}
header div .zhuCe{
margin: 0px;
width: 70px;
height: 20px;
float: right;
line-height: 20px;
}
header nav ul li{
width: 118px;
height: 40px;
line-height: 40px;
text-align: center;
font-family: "微軟雅黑";
float: left;
border: 1px solid #424242;
}
header nav ul a li{
font-size: 18px;
color: #cfcf66;
background-color: #333;
text-decoration: none;
}
header nav ul a li:hover{
color: red;
background-color: #424242;
}
/*主題部分*/
#count{
width: 960px;
min-height: 600px;
_height:600px;
background-color: #aaa;
margin: 10px auto;
overflow: hidden;
}
#count .pic{
width: 100%;
height: 320px;
overflow: hidden;
margin: 6px auto;
background-color: #cfc;
}
#count .pic img{
width: 960px;
height: 320px;
}
/*主題左部分*/
#count .left{
width: 360px;
min-height: 600px;
_height:600px;
float: left;
background-color: #ffa;
}
/*主題右部分*/
#count .right{
width: 600px;
min-height: 600px;
_height:600px;
float: right;
}
/*選擇部分*/
.check div{
border: 1px solid red;
border-radius: 5px;
padding: 10px;
}
.check div p{
margin-bottom: 5px;
border-bottom: 1px solid #552;
}
.check div p i{
float: right;
}
/*發(fā)布部分*/
.release{
border: 5px solid pink;
border-radius: 10px;
padding: 10px;
margin-top: 6px;
}
.release div{
height: 24px;
width: 100%;
}
.release div span{
display: block;
height: 24px;
line-height: 24px;
float: right;
margin-right: 10px;
font-size: 14px;
}
.release div span i{
font-size: 16px;
font-weight: bold;
}
.btxt{
width: 190px;
background: pink;
}
.btxt input{
width: 150px;
}
#txt{
width: 100%;
height: 160px;
border:1px solid #ccc;
}
.release .but-div{
margin-bottom: 5px;
height: 30px;
}
.but-div p{
width: 55px;
height: 30px;
line-height: 30px;
float: left;
padding-right: 10px;
text-align: right;
}
.release .but-div .p1{
background: url(../images/an5.png) no-repeat left center;
}
.release .but-div .p2{
background: url(../images/an4.png) no-repeat left center;
}
.release .but-div .p3{
background: url(../images/an3.png) no-repeat left center;
}
.release .but-div .p4{
background: url(../images/an2.png) no-repeat left center;
}
.release .but-div .p5{
width: 80px;
background: url(../images/an1.png) no-repeat left center;
}
.p6{
float: right;
margin-left: 50px;
}
#btn{
width: 100px;
height: 30px;
border:none;
background: pink;
border-radius: 5px;
line-height: 30px;
text-align: center;
}
/*底部*/
footer{
clear: both;
width: 100%;
min-height: 300px;
_height:300px;
background-color: #222;
}
footer div{
width: 960px;
height: 380px;
margin: 0 auto;
background-color: #222;
}
footer div .lg{
height: 340px;
margin-bottom: 6px;
border-bottom: 1px solid #444;
}
footer div p{
height: 30px;
line-height: 30px;
text-align: center;
color: #ccc;
background-color: #333;
}//頭部
//時(shí)間
function shijian(){
var dt= new Date;
y=dt.getFullYear();
m=dt.getMonth()+1;
r=dt.getDate();
h=dt.getHours()+1;
mi=dt.getMinutes();
s=dt.getSeconds();
mi=checkTime(mi);
s=checkTime(s);
str=(y+"年"+m+"月"+r+"日"+" "+h+":"+mi+":"+s);
document.getElementById('txt').innerHTML=str;
t=setTimeout('shijian()',500)
}
//一個(gè)數(shù)的時(shí)候前加0
function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
$(document).ready(function(){
// 登陸按鈕
$("#bt1").click(function(){
open("file:///D:/daima/menu/MyDemo/myForm.html"," zhuce","width=400,height=600,top=300,left=600");
});
// 注冊(cè)按鈕
$("#bt2").click(function(){
open("file:///D:/daima/menu/MyDemo/myForm.html","denglu ","width=400,height=600,top=300,left=600");
});
});
//pic輪播
window.onload=function(){
window.setInterval("fu()",1000);
shijian();
}
var j = 1;
function fu(){
j++;
if(j===7){
j=1;
}
var obj = document.getElementById("m1");
obj.src="images/img"+ j +".jpg";
}
//主題選擇部分
function checkAll(){
var check,allBox,xq;
allBox=document.getElementById('allBox');
check=document.getElementsByName('check');
xq=document.getElementById('xq');
for (var i = 0; i < check.length; i++) {
if (allBox.checked) {
check[i].checked=true;
xq.innerHTML="全不選";
}else{
check[i].checked=false;
xq.innerHTML="全選";
}
}
}老師這是結(jié)合前面的做的，發(fā)布的練習(xí)在里面