<div style="display:inline-block">
<p>名字</p>
<p>尺寸</p>
<p>价格</p>
</div>
将三行代码放在同一列 名字
尺寸
价格
style="margin-top: 20px 距离外边距20PX
padding 5px 内边距距离
.linetext {
color: #666666;
font-size: 13px;
/*font-weight: ;*/
margin: 15px 15px;
text-transform: uppercase;
text-align: center;
position: relative;
z-index: 2;
}
.linetext:before {
content: " ";
position: absolute;
background: #efeff4;
bottom: -6px;
width: 100px;
height: 30px;
z-index: -1;
left: 50%;
margin-left: -50px;
}
.linetext:after {
content: " ";
position: absolute;
border: 1px solid #c0c0c0;
bottom: 7px;
left: 0;
width: 100%;
height: 0;
z-index: -2;
}
<h5 class="linetext">你可能还需要</h5> 一条横线穿过 你还需要效果 -------你还需要-------
foreach (GridViewRow item in HeadGridView.Rows)
{
double pricerow = Convert.ToDouble(item.Cells[4].Text.Trim()) * Convert.ToDouble(item.Cells[5].Text.Trim());
total += pricerow;
}
total = total * tian;价格相乘总价
DATAMODEL 下面DATAMODELL 双击点开下拉从数据库中添加
H_Customers model1 = new H_CustomersBll().GetModelByID(model.CustomerId.ToString().ToInt());
if (!model1.Id.IsNullOrEmpty())
{
if (model1.Id.ToString().ToInt() != 0)
{
H_CustomersBll pub = new H_CustomersBll();
H_Customers user = pub.GetModelByID(model1.Id.ToString().ToInt());
txtCustomerId.Text = user.NickName;
hdID.Value = model.CouponId.ToString();
}
}
轮播侧滑
<div class="mui-content" >
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="img/6.png">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="img/7.png">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="img/8.png">
</a>
</div>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/APPSetting.js"></script>
<script type="text/javascript" charset="utf-8">
function showhid(id){
document.getElementById(id).style.display ='block';
}
function showhid2(id){
document.getElementById(id).style.display ='none';
}
mui.init({});
var slider = mui("#slider");
slider.slider({
interval: 2000
});
//首页轮播
function LoadData() {
mui.ajax(webSite + 'NoAuth.ashx?op=getindexslider', {
data: {
//pageIndex:pageIndex
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒;
success: function(data) {
//服务器返回响应,根据响应结果,分析是否登录成功;
console.log("ok get");
var table = document.body.querySelector('.mui-slider-group');
var str = '';
table.innerHTML = '';
//console.log('clear');
var datalist = data.Data;
var divfirst = document.createElement('div');
var divlast = document.createElement('div');
divfirst.className = 'mui-slider-item mui-slider-item-duplicate';
divlast.className = 'mui-slider-item mui-slider-item-duplicate';
for (var i = 0; i < datalist.length; i++) {
//console.log(datalist[i].ImageURL);
var div = document.createElement('div');
div.className = 'mui-slider-item';
str = '<a href="#"> ';
str += '<img src="' + webSiteROOT + datalist[i].ImageURL + '"> ';
str += ' <p class="mui-slider-title">' + datalist[i].Description + '</p>';
str += ' </a> ';
var urlstr = webSiteROOT + 'APPHQS/' + datalist[i].OutsideURL;
console.log(urlstr);
div.setAttribute('data-id', urlstr);
if (i == 0) {
divlast.innerHTML = str;
}
if (i == (datalist.length - 1)) {
divfirst.innerHTML = str;
}
div.innerHTML = str;
table.appendChild(div);
}
table.insertBefore(divfirst, table.firstChild);
table.appendChild(divlast);
},
error: function(xhr, type, errorThrown) {
//异常处理;
console.log(type);
}
});
}
mui.plusReady(function() {
LoadData();
});
</script>
图片渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img id=obj src ="img/6.png" width=200 height=150 border =0>
</body>
<script language =javascript >
var curIndex=0;
//时间间隔(单位毫秒),每秒钟显示一张,数组共有5张图片放在Photos文件夹下。
var timeInterval=1000;
var arr=new Array();
arr[0]="img/6.png";
arr[1]="img/7.png";
arr[2]="img/8.png";
setInterval(changeImg,timeInterval);
function changeImg()
{
var obj=document.getElementById("obj");
if (curIndex==arr.length-1)
{
curIndex=0;
}
else
{
curIndex+=1;
}
obj.src=arr[curIndex];
}
</script>
</html>
文字一点上去出现下拉框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{ font-size:12px;}
.show{ position:relative; width:100px; height:20px;text-align:center; line-height:20px; }
.show a{ color:#215968;}
.hidden{ position:absolute; top:20px; left:0; }
.hidden a{ display:inline-block; color:#215968;}
</style>
</head>
<body>
<div class="show" οnmοuseοut="showhid2('downmenu1')">
<a href="#" class="add" οnclick="showhid('downmenu1');">新建</a>
<div class="hidden" id="downmenu1" style=" display:none;">
<ul style="list-style: none;">
<li><a href="index.html">发文拟稿</a></li>
<li><a>发文拟稿</a></li>
<li><a>发文拟稿</a></li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
function showhid(id){
document.getElementById(id).style.display ='block';
}
function showhid2(id){
document.getElementById(id).style.display ='none';
}
</script>
</html>
背景图片撑开 background-size: cover 图片不够大居中不重复 no repeat center
图片不随页面滚动条滚动固定在某一位置样式style=" position: fixed;right: 10px;bottom: 10px;
鼠标经过显示隐藏文字
<html>
<style>
#contain{width: 120px; height: 400px; position: fixed;left: 30px;top:200px; border: solid red 1px ; }
#c{ list-style: none;text-align: center}
</style>
<body>
<div id="contain" onmouseover="over()" onmouseout="out()">
<ul id="c">
<li><a><h2>关于镇远</h2></a></li>
<li><a href="#"><h3>镇远简介</h3></a></li>
<li><a href="#"><h3>品牌释义</h3></a></li>
<li><a href="#"><h3>镇远文化</h3></a></li>
<li><a href="#"><h3>镇远活动</h3></a></li>
<li><a href="#"><h3>镇远简介</h3></a></li>
<li><a href="#"><h3>品牌释义</h3></a></li>
<li><a href="#"><h3>镇远愿景</h3></a></li>
<li><a href="#"><h3>镇远视屏</h3></a></li>
</ul>
</div>
</body>
<script type="text/javascript">
document.getElementById("contain"). = function(){
document.getElementById("c").style.display='block';
}
document.getElementById("contain"). = function(){
document.getElementById("c").style.display='none';
}
</script>
</html>
鼠标经过会显示隐藏导航栏
<html>
<head>
<title>test</title>
<style type="text/css">
#main{
width:370px;
height:400px;
background:url('1.bmp') right top no-repeat;
position:fixed;
top:150px;
border-top:2px solid gray;
border-bottom:2px solid gray;
border-right:2px solid red;
}
#c{ list-style: none;text-align: center}
</style>
<script type="text/javascript">
var frag1=null;
var frag2=null;
function baropen()
{
var barobj=document.getElementById("main");
var curleft=barobj.style.left;
curw=parseInt(curleft);
var test=1;
test*=5;
if(curw<0)
{
barobj.style.left=(curw+test)+"px";
}
else
{
clearInterval(frag1);
frag1=null;
}
}
function barclose(barobj)
{
var barobj=document.getElementById("main");
var curleft=barobj.style.left;
curw=parseInt(curleft,10);
var test=1;
test*=5;
if(curw>-350)
{
barobj.style.left=(curw-test)+"px";
}
else
{
clearInterval(frag2);
frag2=null;
}
}
function loopopen()
{
if(frag2!==null)
{
clearInterval(frag2);
}
frag1=setInterval('baropen()',1);
}
function loopclose()
{
clearInterval(frag1);
frag2=setInterval('barclose()',1);
}
function test()
{
alert(document.getElementById("main").style.left);
}
</script>
</head>
<body>
<div id="main" style="left:-350px;" οnmοuseοut="loopclose();">
<ul id="c">
<li><a><h2>关于镇远</h2></a></li>
<li><a href="#"><h3>镇远简介</h3></a></li>
<li><a href="#"><h3>品牌释义</h3></a></li>
<li><a href="#"><h3>镇远文化</h3></a></li>
<li><a href="#"><h3>镇远活动</h3></a></li>
<li><a href="#"><h3>镇远简介</h3></a></li>
<li><a href="#"><h3>品牌释义</h3></a></li>
<li><a href="#"><h3>镇远愿景</h3></a></li>
<li><a href="#"><h3>镇远视屏</h3></a></li>
</ul>
</div>
<!--
<div id="contain" οnmοuseοut="out()">
<ul id="c">
<li><a><h2>关于镇远</h2></a></li>
<li><a href="#"><h3>镇远简介</h3></a></li>
<li><a href="#"><h3>品牌释义</h3></a></li>
<li><a href="#"><h3>镇远文化</h3></a></li>
<li><a href="#"><h3>镇远活动</h3></a></li>
<li><a href="#"><h3>镇远简介</h3></a></li>
<li><a href="#"><h3>品牌释义</h3></a></li>
<li><a href="#"><h3>镇远愿景</h3></a></li>
<li><a href="#"><h3>镇远视屏</h3></a></li>
</ul>-->
</div>
</body>
</html>
锚点
><a class="main_a" href="#2"><h4>镇远简介</h4></a></li>
<li><a class="main_a" href="#3"><h4>品牌释义</h4></a></li>
<li><a class="main_a" href="#4"><h4>镇远文化</h4></a></li>
<li><a class="main_a" href="#5"><h4>镇远活动</h4></a></li>
<div style=" height: 350px; border: 1px solid red ;"id="2">B</div>
<div style=" height:350px; border: 1px solid red ;"id="3">C</div>
<div style=" height: 350px; border: 1px solid red ;"id="4">D</div>
<div style=" height:350px; border: 1px solid red ;"id="5">E</div>
点上去文字图片放大
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
a:hover{ text-decoration:none; color:red; font-size:20px;}
</style>
</head>
<body>
<a href="#">鼠标悬停这里字体变大</a>
</body>
</html>
鼠标悬停图片变大
<img src="img/1.png" width=422 height=156 onMouseover="this.width=522; this.height=156" onMouseout="this.width=422;this.height=156">
转载于:https://blog.51cto.com/11116201/1783854