热门搜索

发布内容的练习

原创 2019-01-01 15:49:15 284
摘要：<!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号 互联网新闻信息服务许可 &copy;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="全选";
		}
	}
}

老师这是结合前面的做的，发布的练习在里面

发布手记

热门词条

php中文网：公益在线php培训，帮助PHP学习者快速成长！ 增值电信业务经营许可证：苏B2-20210495

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved 湘ICP备2023035733号 关于我们免责申明