首页手记 html前端代码

html前端代码

标签：

Html/CSS

<div >

</div>

将三行代码放在同一列名字

尺寸

价格

Apple-tab-span" >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();

            }
        }

轮播侧滑

</a>

</div>

</a>

</div>

</a>

</div>

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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="' + 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>

</head>

<body>

</body>

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>

<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>

<ul >

</ul>

</div>

</body>

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

图片不随页面滚动条滚动固定在某一位置样式font-family:'宋体';color:rgb(62,75,83);font-size:17px;background:rgb(192,192,192);"><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>

</ul>

</div>

</body>

document.getElementById("contain"). = function(){

document.getElementById("c").style.display='block';

}

document.getElementById("contain"). = function(){

document.getElementById("c").style.display='none';

}

</script>

</html>

鼠标经过会显示隐藏导航栏

<html>

<head>

#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>

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>

</ul>

</div>

<!--

</ul>-->

</div>

</body>

</html>

锚点

><a class="main_a" href="#2"><h4>镇远简介</h4></a></li>

点上去文字图片放大

<html>

<head>

a:hover{ text-decoration:none; color:red; font-size:20px;}

</style>

</head>

<body>

<a href="#">鼠标悬停这里字体变大</a>

</body>

</html>

鼠标悬停图片变大

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕田峪是谁我也不认识

JS工程师

手记
篇

粉丝

40

获赞与收藏

95

关注作者，订阅最新文章

相关文章推荐

前端代码标准最佳实践：HTML篇荐

HTML前端知识

前端常用代码片段(一)

WEB前端之HTML 规范

前端html笔记

阅读免费教程

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

Pandas 入门教程

25个小节 18362 330

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

html前端代码

相关文章推荐

阅读免费教程