摘要：<!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>个字节</span></div>
<p>标题：<input type="text"></p>
<textarea id="txt"></textarea>
<div>
<p>表情</p>
<p>图片</p>
<p>视频</p>
<p>话题</p>
<p>长微博</p>
<p><input type="checkbox" name="gk" id="gk"><label for="gk">公开</label></p>
<button id="btn">发布</button>
</div>
</div>
</body>
</html>由于图片的关系，这部分显示的和我电脑上有点出入
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="keywords" content="关键字列表"/> <meta name="description" content="网页描述"/> <title>我的设计</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>我在这里等待你的到来！</span> <form action=""> <input type="text"> </form> <div> <button id="bt1">登陆</button> <button id="bt2">注册</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="#">选择框的运用</a><i>发布时间:2018-12-28</i></p> <p><input type="checkbox" name="check"><a href="#">选择框的运用</a><i>发布时间:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">选择框的运用</a><i>发布时间:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">选择框的运用</a><i>发布时间:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">选择框的运用</a><i>发布时间:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">选择框的运用</a><i>发布时间:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">选择框的运用</a><i>发布时间:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">选择框的运用</a><i>发布时间:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">选择框的运用</a><i>发布时间:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">选择框的运用</a><i>发布时间:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">选择框的运用</a><i>发布时间:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">选择框的运用</a><i>发布时间:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">选择框的运用</a><i>发布时间: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>个字节</span></div> <p>标题：<input type="text"></p> <textarea id="txt"></textarea> <div> <p>表情</p> <p>图片</p> <p>视频</p> <p>话题</p> <p>长微博</p> <p><input type="checkbox" name="gk" id="gk"><label for="gk">公开</label></p> <button id="btn">发布</button> </div> </div> </div> </div> <!--底部--> <footer> <div> <div></div> <p>用户协议 隐私策略 投诉中心 京公网安备11000002000001号 互联网新闻信息服务许可 ©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;
}
/*发布部分*/
.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;
}//头部
//时间
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)
}
//一个数的时候前加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");
});
// 注册按钮
$("#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="全选";
}
}
}老师这是结合前面的做的，发布的练习在里面
