实现页面：
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
font-size: 12px;
}
ul li{
list-style: none;
}
#nav{
width: 100px;
margin: 0px auto;
}
#nav li{
height: 36px;
}
#nav li span{
display: block;
float: right;
width: 35px;
height: 35px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
background: #7a6e6e url(img/toolbars.png) no-repeat;
}
#nav li:nth-of-type(1) span{background-position: 0px -15px;}
#nav li:nth-of-type(2) span{background-position: 0px -57px;}
#nav li:nth-of-type(3) span{background-position: 1px -106px;}
#nav li:nth-of-type(4) span{background-position: 0px -156px;}
#nav li:nth-of-type(5) span{background-position: 0px -200px;}
#nav li:nth-of-type(6) span{background-position: 2px -265px;}
#nav li p{
height: 35px;
text-align: left;
background: #c81623;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
line-height: 35px;
padding-left: 10px;
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script>
$(document).ready(function(){
$("#nav li span").mouseover(function(){
$(this).css({"background-color":"#c81623"});
var index=$("#nav li span").index(this);
$("#nav li:eq("+index+") span~p").show();
}).mouseout(function(){
$(this).css({"background-color":"#7a6e6e"});
var index=$("#nav li span").index(this);
$("#nav li:eq("+index+") span~p").hide();
})
})
</script>
</head>
<body>
<div id="nav">
<ul>
<li><span></span><p>京东会员</p></li>
<li><span></span><p>购物车</p></li>
<li><span></span><p>我的关注</p></li>
<li><span></span><p>我的足迹</p></li>
<li><span></span><p>我的消息</p></li>
<li><span></span><p>咨询JIMI</p></li>
</ul>
</div>
</body>
</html>
实现效果：
实现页面：
实现代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>今日团购模块 </title>
<style>
*{
margin:0px;
padding:0px;
font-size:12px;
}
#pruduce{
width:947px;
background-color:#F2F2F2;
margin: 0px auto;
}
.top{
height:55px;
background:url(img/top.jpg) no-repeat 10px 10px;
}
.main{
text-align:center;
height:309px;
}
.box{
width:300px;
height:285px;
border:1px solid #999;
margin:0px 6px;
float:left;
cursor:pointer;
}
.box1{
width:300px;
height:285px;
border:1px solid #999;
margin:0px 6px;
float:left;
cursor:pointer;
}
.box2{
width:300px;
height:285px;
border:1px solid #999;
margin:0px 6px;
float:left;
cursor:pointer;
}
dl{
padding-top:3px;
}
dd{
line-height:30px;
}
div.btprice_1{
height:50px;
background:#FFF2CE url(img/bt1.jpg) no-repeat 5px 4px;
}
div.btprice_2{
height:50px;
background:#FFF2CE url(img/bt2.jpg) no-repeat 5px 4px;
}
div.btprice_3{
height:50px;
background:#FFF2CE url(img/bt3.jpg) no-repeat 5px 4px;
}
.hoverstyle{
background-color:#D51938;
color:#fff;
}
.red{
background-color: red;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script>
$(function(){
$(".box").mouseover(function(){
$(".box").addClass("red");
}).mouseout(function(){
$(".box").removeClass("red");
});
$(".box1").mouseover(function(){
$(".box1").addClass("red");
}).mouseout(function(){
$(".box1").removeClass("red");
});
$(".box2").mouseover(function(){
$(".box2").addClass("red");
}).mouseout(function(){
$(".box2").removeClass("red");
});
})
</script>
</head>
<body>
<div id="pruduce">
<div class="top"></div>
<div class="main">
<div class="box">
<dl>
<dt><img src="img/pic1.jpg" /></dt>
<dd>[包邮]亮点可移动儿童防身高帖（每个ID限20）</dd>
</dl>
<div class="btprice_1"></div>
</div>
<div class="box1">
<dl>
<dt><img src="img/pic2.jpg" /></dt>
<dd>[包邮]韩国泡温泉游泳衣价达玛分教保守纤瘦大胸泳装</dd>
</dl>
<div class="btprice_2"></div>
</div>
<div class="box2">
<dl>
<dt><img src="img/pic3.jpg" /></dt>
<dd>[包邮]贵人鸟运动透气跑鞋P23423(每个限购5件)</dd>
</dl>
<div class="btprice_3"></div>
</div>
</div>
</div>
</body>
</html>
实现效果：
实现页面：
实现代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>QQ简易聊天框</title>
<style>
*{
margin: 0;
padding: 0;
line-height: 22px;
font-family: "Arial", "微软雅黑";}
#chat{
margin: 3px auto 0 auto;
width:436px;
border: 1px #999999 solid;
}
.chatBody{
width: 100%;
height: 220px;
overflow:auto;
}
.chatText{
border: none;
width: 100%;
height: 50px;
}
.btn{
text-align: right;
}
.btn span{
display: inline-block;
padding: 0 10px;
height: 25px;
overflow: hidden;
color: #ffffff;
border-radius: 5px;
background-color: #069dd5;
font-size: 12px;
margin-right: 3px;
cursor:pointer;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script>
$(document).ready(function(){
var $imgs=new Array("img/head01.jpg","img/head02.jpg","img/head03.jpg");
var $ni=new Array("时尚伊人","六月奇迹","松松");
$("#send").click(function(){
var $sui = parseInt(Math.random() * 3);
var $nei=$("textarea").val();
if($nei.length==""){
return;
}else{
var $currentstr=$(".chatBody").append("<div><img src='"+$imgs[$sui]+"'/>"+$ni[$sui]+"<br/><p >"+$nei+"</p></div>");
$(".chatBody p").addClass("a");
$("textarea").val("");
}
});
});
</script>
</head>
<body>
<section id="chat">
<div class="chatBody"></div>
<div><img src="img/icon.jpg"></div>
<textarea class="chatText"></textarea>
<div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div>
</section>
</body>
</html>
实现效果：
实现页面：
实现代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>论坛列表</title>
<link href="css/bbs.css" rel="stylesheet">
<style type="text/css">
*{
margin: 0;
padding: 0;
font-family: "Arial", "微软雅黑";
}
ul,li{
list-style: none;
}
.bbs{
margin: 0 auto;
width: 600px;
position: relative;
}
header{
padding: 5px 0;
border-bottom: 1px solid #cecece;
}
header span{
display:inline-block;
width: 220px;
height: 50px;
color: #fff;
background: #009966;
font-size: 18px;
font-weight: bold;
text-align: center;
line-height: 50px;
border-radius: 8px;
cursor: pointer;
}
.post{
position: absolute;
background: #ffffff;
border: 1px #cccccc solid;
width: 500px;
left: 65px;
top:70px;
padding: 10px;
font-size: 14px;
z-index: 999999;
display: none;
}
.post .title{
width: 450px;
height:30px;
line-height: 30px;
display: block;
border: 1px #cecece solid;
margin-bottom: 10px;
}
.post select{
width: 200px;
height: 30px;
}
.post .content{
width: 450px;
height: 200px;
display: block;
margin: 10px 0;
border: 1px #cecece solid;
}
.post .btn{
width: 160px;
height: 35px;
color: #fff;
background: #009966;
border: none;
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 35px;
border-radius: 8px;
cursor: pointer;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
//单击我要发帖
var i=0;
$("header").click(function(){
if(i>0){
$(".post").hide();
i=0;
}else{
$(".post").show();
i=1;
}
});
//点击发布
$(".btn").click(function(){
//1.创建li
var $li=$("<li></li>");
//2.创建img
var tou=new Array("tou01.jpg","tou02.jpg","tou03.jpg","tou04.jpg");
var r=parseInt(Math.random()*tou.length);//随机数0 1 2 3
var $img=$("<img src=img/"+tou[r]+" />");
$li.append($img);
//3.创建h1
var $h1=$("<h1>"+$(".title").val()+"</h1>");
$li.append($h1);
//4.创建p
var date=new Date();
//年
var year=date.getFullYear();
//月
var month=date.getMonth()+1;
//日
var day=date.getDate();
//时
var hour=date.getHours();
//分
var minute=date.getMinutes();
//秒
var second=date.getSeconds();
//时间
var time=year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
//版块信息+发布时间
var $p=$("<p>"+$("select").val()+"<span>发布时间："+time+"</span></p>");
$li.append($p);
$(".bbsList ul").prepend($li);//插入到前面
$(".post").hide();
$(".title").html("");
$("select").html("<option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option>");
$("textarea").html("");
});
});
</script>
</head>
<body>
<div class="bbs">
<header><span>我要发帖</span></header>
<section>
<ul></ul>
</section>
<div class="post">
<input class="title" placeholder="请输入标题（1-50个字符）">
所属版块：<select><option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option></select>
<textarea class="content"></textarea>
<input class="btn" value="发布">
</div>
<div class="bbsList"><ul></ul></div>
</div>
</body>
</html>
实现效果：
实现页面：
实现代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 凡客诚品帮助中心页面</title>
<style>
*{
margin:0px;
padding:0px;
font-size:12px;
}
#bodyDiv{
position:relative;
background:#FFF url(img/bg.jpg) no-repeat;
width:1016px;
height:1176px;
margin:0 auto;
}
.search{
position:absolute;
left:125px;
top:258px;
height:24px;
line-height:24px;
width:325px;
color:#999;
}
.tab{
position:absolute;
left:276px;
top:397px;
}
#tab_bg{
width: 700px;
height: 36px;
line-height: 36px;
cursor: pointer;
}
.tab_bg0 {
background: url(img/news_bghover.gif) 0px 0px;
}
.tab_bg1 {
background: url(img/news_bghover.gif) 0px -36px;
}
.tab_bg2 {
background: url(img/news_bghover.gif) 0px -72px;
}
.tab_bg3 {
background: url(img/news_bghover.gif) 0px -108px;
}
.tab_bg4 {
background: url(img/news_bghover.gif) 0px -144px;
}
a{
color:#000;
text-decoration:none;
}
.tab_common {
width: 140px;
height: 36px;
line-height: 36px;
float: left;
text-align: left;
cursor: pointer;
text-indent: 40px;
}
.tab_current {
width: 140px;
height: 36px;
line-height: 36px;
float: left;
text-align: left;
cursor: pointer;
color: #ffffff;
text-indent: 40px;
}
.tab_current a{color:#fff;}
.jiejue2{
position:absolute;
left:817px;
top:750px;
}
/*nav*/
#nav{
position:absolute;
top:366px;
left:26px;
}
#nav ul{
list-style:none;
}
#nav ul li{
display:block;
width:196px;
line-height:30px;
border-bottom:1px solid #999;
}
#nav ul li div.first{
text-indent:20px;
border-bottom:1px solid #999;
}
#nav ul.second{
display:none;
}
#nav ul.second li{
display:block;
width:166px;
padding-left:30px;
height:30px;
line-height:30px;
border:none;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script>
$(document).ready(function () {
$(".first").click(function () {
$(this).next().show().end().parent().siblings().children("ul").hide();
});
$(".search").focus(function () {
$(this).attr({"value": ""});
}).blur(function () {
if ($("input").attr("value") == "") {
$(this).attr({"value": "请输入要查询的问题"});
}
});
$(".qiehuan input:eq(1)").click(function () {
$(".wenti").show();
});
$(".second li").each(function () {
$(this).mouseover(function () {
$(this).addClass("act").siblings().removeClass("act").end().parent().prev().addClass("act").end().parents().siblings().children(".first").removeClass("act");
});
});
});
</script>
</head>
<body>
<div id="bodyDiv">
<!-- 输入框 -->
<input type="text" value="请输入要查询的问题" name='search' class='search'/>
<!-- 左边导航 -->
<div id='nav'>
<ul>
<li>
<div class='first'>账号管理</div>
<ul class='second'>
<li>账号注册</li>
<li>找回密码</li>
<li>账户关联登录</li>
<li>账号常见问题</li>
</ul>
</li>
<li>
<div class='first'>购物指南</div>
<ul class='second'>
<li>购物流程</li>
<li>服务条款</li>
<li>积分计划</li>
<li>取消订单</li>
</ul>
</li>
<li>
<div class='first'>配送方式</div>
<ul class='second'>
<li>国内配送</li>
<li>订单拆分</li>
<li>商品验货与签收</li>
<li>配送常见问题</li>
</ul>
</li>
<li>
<div class='first'>支付方式</div>
<ul class='second'>
<li>在线支付</li>
<li>货到付款</li>
<li>VANCL礼品卡</li>
<li>发票制度</li>
</ul>
</li>
</ul>
</div>
<!-- 流程 -->
<div class="tab">
<div id="tab_bg" class="tab_bg0">
<div class="tab_current">
<a name="index_gwlc_1" class="track" href="#">1.新用户注册</a>
</div>
<div class="tab_common">
<a name="index_gwlc_2" class="track" href="#">2.挑选商品</a>
</div>
<div class="tab_common">
<a name="index_gwlc_3" class="track" href="#">3.确认下单</a>
</div>
<div class="tab_common">
<a name="index_gwlc_4" class="track" href="#">4.订单跟踪</a>
</div>
<div class="tab_common">
<a name="index_gwlc_5" class="track" href="#">5.验货签收</a>
</div>
</div>
</div>
<!-- 提交问题 -->
<div class="jiejue2">
<h3>这条帮助是否解决了您的问题？</h3>
<div class="qiehuan">
<input name="IsAvail" type="radio" value="1" checked="checked" /> 已解决
<input name="IsAvail" type="radio" value="0" /> 未解决
<input id="ContID" type="hidden" value="1"/>
</div>
<div class="wenti" style="display:none">
<p>问题没解决？请选择原因:</p>
<p><select name="TrackID" id="TrackID" >
<option value="1">文字太多，阅读困难</option>
<option value="2">内容复杂，看不懂</option>
<option value="3">描述不清楚</option>
<option value="99">其他原因</option>
</select></p>
<div id="TrackContentDiv" style=" display:none;">
<p>也可以直接填写原因:</p>
<p><textarea name="TrackContent" id="TrackContent" cols="45" rows="5" ></textarea></p>
</div>
</div>
<p class="wenti_result"><a href=" "><img src="img/submit_bt.jpg"/></a></p>
</div>
</div>
</body>
</html>
实现效果：
以上均为个人所写，如有错误，欢迎指正，谢谢~
扫一扫
4074
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
