本文介绍了一系列前端开发技巧，包括JSON数据转换、可编辑表格实现、进度条动态展示、城市联动效果及简历制作等，提供了丰富的代码实例。
json转化(常用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../js/vue.js"></script>
<title>条件</title>
</head>
<style type="text/css">
</style>
<body>
<div id="example">
<p>复选框元素</p>
<span>你的爱好:</span>
<input type="checkbox" v-model="message3" value="篮球"><label>篮球</label>
<input type="checkbox" v-model="message3" value="滑板"><label>滑板</label>
<input type="checkbox" v-model="message3" value="音乐"><label>音乐</label>
<input type="checkbox" v-model="message3" value="跳舞"><label>跳舞</label>
<input type="checkbox" v-model="message3" value="其他"><label>其他</label>
<span>你选择的是:{{message3}}</span>
<br/>
<button v-on:click="btn_submit">提交</button>
</div>
<script>
new Vue({
el:"#example",
data:{
message3:[],
},
methods:{
btn_submit:function () {
console.log(this.message3);
let jsonHobby = this.message3;
let a=JSON.stringify(jsonHobby);//数组转化成json
console.info("转化成json:"+a);
console.info("解析json:"+JSON.parse(a));//解析json
}
}
})
</script>
</body>
</html>
结论：
JSON.parse(“json内容”); //前端解析json，如果json为空，会报错
JSON.stringify(“数组”); //数组转成json格式
可编辑表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>可编辑表格</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/script1.js"></script>
</head>
<style>
div.warp {
width: 834px;
margin-left:50px;
margin-top: 50px;
border: 1px solid #ccc;
}
div.title {
height: 40px;
line-height: 40px;
padding-left: 10px;
background-color: #157FCC;
font-size: 20px;
color: #fff;
}
div.tools {
height: 30px;
padding: 10px;
background-color: #DFEAF2;
}
div.addBtn {
width: 95px;
height: 20px;
padding: 5px;
border: 1px solid #ccc;
color: #fff;
background-color: #307FB9;
vertical-align: middle;
cursor: pointer;
}
div.icon {
display: inline-block;
vertical-align: middle;
}
table {
border-collapse:collapse;
}
tr.evenline {
background-color: #fafafa;
}
td {
width: 100px;
height: 28px;
line-height: 28px;
padding-left: 10px;
}
td.widther {
width: 150px;
}
thead td {
border: 1px solid #ccc;
background-color: #f5f5f5;
}
/* CSS 实现按钮图标 */
span.icon{height:20px; width:20px; display:block; position:relative;}
.add{border-radius:25px;-webkit-border-radius:25px;-moz-border-radius:25px; background:#78AF6B;}
.add:before, .add:after{
content:''; height:4px; width:12px; display:block; background:#fff;
border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;
position:absolute; top:8px; left:4px;
}
.add:after{height:12px; width:4px; top:4px; left:8px;}
.del{
border-radius:50px;-webkit-border-radius:50px;-moz-border-radius:50px;
background:#FF3333; cursor: pointer;
}
.del:before {
content:''; height:4px; width:12px; display:block; background:#fff;
position:absolute; top:8px; left:4px; border-radius:10px;
-webkit-border-radius:10px;-moz-border-radius:10px;
}
</style>
<body>
<div class="warp">
<div class="title"><span>可编辑表格</span></div>
<div class="tools">
<div class="addBtn">
<div class="icon">
<span class="add icon"></span>
</div>
<div class="icon">
新增数据
</div>
</div>
</div>
<table id="tab">
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
<td>入学年份</td>
<td>入学日期</td>
<td class="widther">所学专业</td>
<td>删除</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="edi-text">张萍萍</td>
<td class="edi-gender">女</td>
<td class="edi-year">2000</td>
<td class="edi-text">2000-09-01</td>
<td class="edi-text">材料科学与工程系</td>
<td>
<span class="del icon"></span>
</td>
</tr>
<tr class="evenline">
<td>2</td>
<td class="edi-text">陈飞</td>
<td class="edi-gender">男</td>
<td class="edi-year">2000</td>
<td class="edi-text">2000-09-01</td>
<td class="edi-text">化学系</td>
<td>
<span class="del icon"></span>
</td>
</tr>
<tr>
<td>3</td>
<td class="edi-text">董婷婷</td>
<td class="edi-gender">女</td>
<td class="edi-year">2000</td>
<td class="edi-text">2000-09-01</td>
<td class="edi-text">化学系</td>
<td>
<span class="del icon" ></span>
</td>
</tr>
<tr class="evenline">
<td>4</td>
<td class="edi-text">康莹莹</td>
<td class="edi-gender">女</td>
<td class="edi-year">2000</td>
<td class="edi-text">2000-09-01</td>
<td class="edi-text">外国语系</td>
<td>
<span class="del icon"></span>
</td>
</tr>
<tr>
<td>5</td>
<td class="edi-text">唐可儿</td>
<td class="edi-gender">女</td>
<td class="edi-year">2000</td>
<td class="edi-text">2000-09-01</td>
<td class="edi-text">外国语系</td>
<td>
<span class="del icon"></span>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
$(document).ready(function(){
bindAddBtn();
bindDelBtn();
bindCellEdit();
});
// 绑定添加数据按钮事件
function bindAddBtn() {
$('div.addBtn').click(function() {
var count = 6 // code
var elements = '<tr><td>' + count + '</td><td class="edi-text">安好</td>'
+ '<td class="edi-gender">女</td><td class="edi-year">2016</td>'
+ '<td class="edi-text">2015-09-01</td>'
+ '<td class="edi-text">材料科学与工程系</td>'
+ '<td><span class="del icon"></span></td></tr>';
// code
$("tbody").append(elements);
});
}
// 绑定删除按钮事件
function bindDelBtn() {
// var tb = $("#tab");
// $(".del",tb).die('click').live('click',function(){
// $(this).parent().parent().remove();
// });
$('.del').click(function(){
if(window.confirm("您确定要删除数据吗?"))
{
$(this).parent().parent().remove();
}
});
}
// 绑定单元格双击事件
function bindCellEdit() {
$("table").on("dblclick","td",function() {
if ($(this).children("input").length > 0) {
return false;
}
var tdDom = $(this);
//保存初始值
var tdPreText = $(this).text();
//给td设置宽度和给input设置宽度并赋值
$(this).width(100).html("<input type='text'>").find("input").width(100).val(tdPreText);
//失去焦点的时候重新赋值
var inputDom = $(this).find("input");
inputDom.blur(function () {
var newText = $(this).val();
$(this).remove();
tdDom.text(newText);
})
})
}
进度条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>进度条</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/script2.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<style>
div.progress {
width: 700px;
margin: 50px;
}
div.bar {
width: 100%;
height: 35px;
}
div.border, div.percent {
float: left;
height: 30px;
}
div.border {
width: 90%;
border: 1px solid #ccc;
background-color: #eee;
}
div.fill {
width: 0%;
height: 100%;
background-color: #6CAF00;
}
div.percent {
width: 8%;
line-height: 30px;
margin: 1px;
text-align: center;
font-size: 24px;
}
div.control {
height: 20px;
padding: 10px;
}
.clear {
clear:both;
}
</style>
<div class="progress">
<div class="bar">
<div class="border">
<div class="fill"></div>
</div>
<div class="percent">
<span class="num">0</span>%
</div>
<div class="clear"></div>
</div>
<div class="control">
<button class="start">开始</button>
<button class="pause">暂停</button>
</div>
</div>
</body>
</html>
let intervalHandler;
$(document).ready(function(){
$('.start').click(function() {
$('.start').text('重新开始');
$('.pause').text('暂停');
$('span.num').text(0);
doProgress();
});
$('.pause').click(function() {
if ($('.pause').text() == '暂停') {
$('.pause').text('继续');
clearInterval(intervalHandler);
} else {
$('.pause').text('暂停');
doProgress();
}
});
});
function doProgress() {
clearInterval(intervalHandler);
intervalHandler = setInterval(function() {
var percent = parseInt($('span.num').text());
if (percent != 100) {
percent++;
$('div.fill').width(percent + '%');
$('span.num').text(percent);
}
}, 100);
}
动态简历（城市联动效果）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../js/jquery-1.8.3.js"></script>
<script src="../js/script.js"></script>
<title>三级联动</title>
</head>
<body>
<style>
div.page {
width: 800px;
height: 842px;
margin: 50px auto;
font-family:SimHei;
}
div.top, div.footer {
background-color: #2BA4DD;
}
div.top {
height: 35px;
line-height: 35px;
text-align: center;
color: #fff;
font-size: 18px;
}
div.footer {
height: 15px;
margin-top: 30px;
}
li {
list-style-type: none;
}
li.topContact {
display: inline-block;
padding: 0px 70px;
}
div.header {
height: 130px;
padding: 30px 0px;
text-align: center;
}
div.name {
height: 100px;
line-height: 100px;
font-size: 50px;
}
div.job {
height: 30px;
line-height: 30px;
font-size: 20px;
}
div.content {
}
/* Panel 是简历信息具体的内容面板，即可伸缩面板 */
.panel {
margin-top: 20px;
padding: 0px 0px 20px 0px;
}
.panelTitle {
height: 35px;
width: 100%;
border-bottom: 2px solid #2BA4DD;
}
div.colorBlock, div.title {
float: left;
}
div.scrollBtn {
float: right;
}
/* 伸缩面板的伸缩按钮 */
span.scroIcon {
height:20px; width:40px; display:block; position:relative;
cursor: pointer;
}
.scroIcon:before{
content:''; height:0; width:0; display:block; border:15px transparent double;
border-bottom-width:0; border-top-color:#2BA4DD; position:absolute;
top:0px; left:0px; }
.colorBlock {
height: 100%;
width: 25px;
margin-right: 15px;
background-color: #2BA4DD;
}
.title {
width: 400px;
height: 100%;
line-height: 35px;
font-size: 24px;
}
/* 简历项 */
li.resumeItem {
padding: 5px 0px;
}
li.resumeItem span, input {
display: inline-block;
}
li.resumeItem span {
width: 150px;
}
li.resumeItem select {
width: 100px;
}
.clear {
clear:both;
}
</style>
<div class="page">
<div class="top">
<ul>
<li class="topContact">CELL: 158 5151 1985</li>
<li class="topContact">EMAIL: mail@domain.com</li>
</ul>
</div>
<div class="header">
<div class="name">
<span>大 漠 孤 烟</span>
</div>
<div class="job">
<span>Front End Web Developer</span>
</div>
</div>
<div class="content">
<div class="panel">
<div class="panelTitle">
<div class="colorBlock"></div>
<div class="title">
<span>个人信息</span>
</div>
<div class="scrollBtn">
<span class="scroIcon"></span>
</div>
<div class="clear"></div>
</div>
<div class="panelContent">
<ul>
<li class="resumeItem"><span>姓名</span><input type="text" /></li>
<li class="resumeItem">
<span>性别</span>
<select>
<option value="">--请选择--</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</li>
<li class="resumeItem">
<span>出生年月</span><select class="brithYear">
<option value="">--请选择--</option>
</select> 年
<select class="brithMonth">
<option value="">--请选择--</option>
</select> 月
</li>
<li class="resumeItem">
<span>户籍所在地</span><select class="province">
<option value="">--请选择--</option>
</select>
<select class="city">
<option value="">--请选择--</option>
</select>
</li>
</ul>
</div>
</div>
<div class="panel">
<div class="panelTitle">
<div class="colorBlock"></div>
<div class="title">
<span>联系方式</span>
</div>
<div class="scrollBtn">
<span class="scroIcon"></span>
</div>
<div class="clear"></div>
</div>
<div class="panelContent">
<ul>
<li class="resumeItem"><span>手机号码</span><input type="text" /></li>
<li class="resumeItem"><span>电子邮箱</span><input type="text" /></li>
<li class="resumeItem"><span>现居地址</span><input type="text" /></li>
</ul>
</div>
</div>
<div class="panel">
<div class="panelTitle">
<div class="colorBlock"></div>
<div class="title">
<span>求职意向</span>
</div>
<div class="scrollBtn">
<span class="scroIcon"></span>
</div>
<div class="clear"></div>
</div>
<div class="panelContent">
<ul>
<li class="resumeItem">
<span>求职状态</span><select>
<option value="">--请选择--</option>
<option value="1">工作中</option>
<option value="2">正在找工作</option>
</select>
</li>
<li class="resumeItem">
<span>目标薪资</span><select>
<option value="">--请选择--</option>
<option value="1">月薪</option>
</select>
<select>
<option value="">--请选择--</option>
<option value="1">3K~4K</option>
<option value="2">5K~6K</option>
<option value="2">5K~6K</option>
<option value="2">7K~8K</option>
<option value="2">9K~10K</option>
<option value="2">11K~15K</option>
<option value="2">16K~20K</option>
<option value="2">20K以上</option>
</select>
</li>
</ul>
</div>
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
$(document).ready(function(){
//code
prov = JSON.parse(citys);
console.log(prov);
initForm();
initProvince();
bindIconClick();
bindProvinceChange();
});
// 初始化日期下拉框数据
function initForm() {
let item = null,year = 1970;
for(let i=26; i>=0; i--){
item = $('<option value="'+(year+i)+'">'+(year+i)+'</option>');
$('.brithYear').append(item);
}
for(let i=1; i<=12; i++){
item = $('<option value="'+i+'">'+i+'</option>');
$('.brithMonth').append(item);
}
}
// 绑定省数据
function initProvince() {
let i,item;
for(i=0;i<prov.length;i++){
item = $('<option value="'+prov[i].name+'">'+prov[i].name+'</option>');
$('.province').append(item);
}
}
// 绑定省份选择框事件
function bindProvinceChange() {
$('.province').change(function(){
$($('.city').children().get(0)).siblings().remove();
let i,item,cities;
for(i=0;i<prov.length;i++){
if(prov[i].name==$('.province').val()){
cities = prov[i].cities;
console.log(cities);
break;
}
}
for(i=0;i<cities.length;i++){
item = $('<option value="'+cities[i]+'">'+cities[i]+'</option>');
$('.city').append(item);
}
});
}
// 绑定伸缩面板事件
function bindIconClick() {
$('span.scroIcon').click(function(event){
var eventIcon=$(event.target);
var contentPanel=eventIcon.parents('.panelTitle').next();
if(contentPanel.is(':hidden')){
contentPanel.show();
}else{
contentPanel.hide();
}
});
}
var citys = '[{ "name": "北京", "cities": ["西城", "东城", "崇文", "宣武", "朝阳", "海淀", "丰台", "石景山", "门头沟", "房山", "通州", "顺义", "大兴", "昌平", "平谷", "怀柔", "密云", "延庆"] },'
+ '{ "name": "天津", "cities": ["青羊", "河东", "河西", "南开", "河北", "红桥", "塘沽", "汉沽", "大港", "东丽", "西青", "北辰", "津南", "武清", "宝坻", "静海", "宁河", "蓟县", "开发区"] },'
+ '{ "name": "河北", "cities": ["石家庄", "秦皇岛", "廊坊", "保定", "邯郸", "唐山", "邢台", "衡水", "张家口", "承德", "沧州", "衡水"] },'
+ '{ "name": "山西", "cities": ["太原", "大同", "长治", "晋中", "阳泉", "朔州", "运城", "临汾"] },'
+ '{ "name": "内蒙古", "cities": ["呼和浩特", "赤峰", "通辽", "锡林郭勒", "兴安"] },'
+ '{ "name": "辽宁", "cities": ["大连", "沈阳", "鞍山", "抚顺", "营口", "锦州", "丹东", "朝阳", "辽阳", "阜新", "铁岭", "盘锦", "本溪", "葫芦岛"] },'
+ '{ "name": "吉林", "cities": ["长春", "吉林", "四平", "辽源", "通化", "延吉", "白城", "辽源", "松原", "临江", "珲春"] },'
+ '{ "name": "黑龙江", "cities": ["哈尔滨", "齐齐哈尔", "大庆", "牡丹江", "鹤岗", "佳木斯", "绥化"] },'
+ '{ "name": "上海", "cities": ["浦东", "杨浦", "徐汇", "静安", "卢湾", "黄浦", "普陀", "闸北", "虹口", "长宁", "宝山", "闵行", "嘉定", "金山", "松江", "青浦", "崇明", "奉贤", "南汇"] },'
+ '{ "name": "江苏", "cities": ["南京", "苏州", "无锡", "常州", "扬州", "徐州", "南通", "镇江", "泰州", "淮安", "连云港", "宿迁", "盐城", "淮阴", "沐阳", "张家港"] },'
+ '{ "name": "浙江", "cities": ["杭州", "金华", "宁波", "温州", "嘉兴", "绍兴", "丽水", "湖州", "台州", "舟山", "衢州"] },'
+ '{ "name": "安徽", "cities": ["合肥", "马鞍山", "蚌埠", "黄山", "芜湖", "淮南", "铜陵", "阜阳", "宣城", "安庆"] },'
+ '{ "name": "福建", "cities": ["福州", "厦门", "泉州", "漳州", "南平", "龙岩", "莆田", "三明", "宁德"] },'
+ '{ "name": "江西", "cities": ["南昌", "景德镇", "上饶", "萍乡", "九江", "吉安", "宜春", "鹰潭", "新余", "赣州"] },'
+ '{ "name": "山东", "cities": ["青岛", "济南", "淄博", "烟台", "泰安", "临沂", "日照", "德州", "威海", "东营", "荷泽", "济宁", "潍坊", "枣庄", "聊城"] },'
+ '{ "name": "河南", "cities": ["郑州", "洛阳", "开封", "平顶山", "濮阳", "安阳", "许昌", "南阳", "信阳", "周口", "新乡", "焦作", "三门峡", "商丘"] },'
+ '{ "name": "湖北", "cities": ["武汉", "襄樊", "孝感", "十堰", "荆州", "黄石", "宜昌", "黄冈", "恩施", "鄂州", "江汉", "随枣", "荆沙", "咸宁"] },'
+ '{ "name": "湖南", "cities": ["长沙", "湘潭", "岳阳", "株洲", "怀化", "永州", "益阳", "张家界", "常德", "衡阳", "湘西", "邵阳", "娄底", "郴州"] },'
+ '{ "name": "广东", "cities": ["广州", "深圳", "东莞", "佛山", "珠海", "汕头", "韶关", "江门", "梅州", "揭阳", "中山", "河源", "惠州", "茂名", "湛江", "阳江", "潮州", "云浮", "汕尾", "潮阳", "肇庆", "顺德", "清远"] },'
+ '{ "name": "广西", "cities": ["南宁", "桂林", "柳州", "梧州", "来宾", "贵港", "玉林", "贺州"] },'
+ '{ "name": "海南", "cities": ["海口", "三亚"] },'
+ '{ "name": "重庆", "cities": ["渝中", "大渡口", "江北", "沙坪坝", "九龙坡", "南岸", "北碚", "万盛", "双桥", "渝北", "巴南", "万州", "涪陵", "黔江", "长寿"] },'
+ '{ "name": "四川", "cities": ["成都", "达州", "南充", "乐山", "绵阳", "德阳", "内江", "遂宁", "宜宾", "巴中", "自贡", "康定", "攀枝花"] },'
+ '{ "name": "贵州", "cities": ["贵阳", "遵义", "安顺", "黔西南", "都匀"] },'
+ '{ "name": "云南", "cities": ["昆明", "丽江", "昭通", "玉溪", "临沧", "文山", "红河", "楚雄", "大理"] },'
+ '{ "name": "西藏", "cities": ["拉萨", "林芝", "日喀则", "昌都"] },'
+ '{ "name": "陕西", "cities": ["西安", "咸阳", "延安", "汉中", "榆林", "商南", "略阳", "宜君", "麟游", "白河"] },'
+ '{ "name": "甘肃", "cities": ["兰州", "金昌", "天水", "武威", "张掖", "平凉", "酒泉"] },'
+ '{ "name": "青海", "cities": ["黄南", "海南", "西宁", "海东", "海西", "海北", "果洛", "玉树"] },'
+ '{ "name": "宁夏", "cities": ["银川", "吴忠"] },'
+ '{ "name": "新疆", "cities": ["乌鲁木齐", "哈密", "喀什", "巴音郭楞", "昌吉", "伊犁", "阿勒泰", "克拉玛依", "博尔塔拉"] },'
+ '{ "name": "香港", "cities": ["中西区", "湾仔区", "东区", "南区", "九龙-油尖旺区", "九龙-深水埗区", "九龙-九龙城区", "九龙-黄大仙区", "九龙-观塘区", "新界-北区", "新界-大埔区", "新界-沙田区", "新界-西贡区", "新界-荃湾区", "新界-屯门区", "新界-元朗区", "新界-葵青区", "新界-离岛区"] },'
+ '{ "name": "澳门", "cities": ["花地玛堂区", "圣安多尼堂区", "大堂区", "望德堂区", "风顺堂区", "嘉模堂区", "圣方济各堂区", "路氹城"]}]';
let prov;
获取网页区域的大小
console.log("网页可见区域宽:"+document.body.clientWidth);
console.log("网页可见区域高:"+document.body.clientHeight);
console.log("网页可见区域宽(包括变线和滚动条的宽):"+document.body.offsetWidth);
console.log("网页可见区域高(包括变线的宽)"+document.body.offsetHeight);
console.log("网页正文全文宽:"+document.body.scrollWidth);
console.log("网页正文全文高:"+document.body.scrollHeight);
console.log("网页正文部分上:"+window.screenTop);
console.log("网页正文部分左:"+window.screenLeft);
console.log("屏幕分辨率的宽"+window.screen.width);
console.log("屏幕分辨率的高:"+window.screen.height);
console.log("屏幕可用工作区高度:"+window.screen.availHeight);
console.log("屏幕可用工作区宽度:"+window.screen.availWidth);
console.log("屏幕设置是:"+window.screen.colorDepth+"位彩色");
实现盒子拖拽功能
div{
height: 100px;
width:100px;
background-color: #FF0000;
border-radius: 5px;
margin-bottom: 5px;
position: absolute;
top: 100px;
left: 120px;
}
<div id="example"></div>
<script>
$(function () {
$("#example").mousedown(function (e) {
var positionDiv = $(this).offset();
console.log(positionDiv);//直接获取左上角距离顶部和左边的对象
console.log(e.pageX);//获取鼠标按下去 距离左边的x位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../js/jquery-1.8.3.js"></script>
<link rel="stylesheet" href="../css/common.css">
<title>Title</title>
</head>
<body>
<div id="example"></div>
<script>
$(function () {
$("#example").mousedown(function (e) {
var positionDiv = $(this).offset();
var distenceX = e.pageX - positionDiv.left;
var distenceY = e.pageY - positionDiv.top;
$(document).mousemove(function(e) {
console.log(e.pageX);
var x = e.pageX - distenceX;
var y = e.pageY - distenceY;
if (x < 0) {
x = 0;
} else if (x > $(document).width() - $('div').outerWidth(true)) {
x = $(document).width() - $('div').outerWidth(true);
}
if (y < 0) {
y = 0;
} else if (y > $(document).height() - $('div').outerHeight(true)) {
y = $(document).height() - $('div').outerHeight(true);
}
$('div').css({
'left': x + 'px',
'top': y + 'px'
});
});
$(document).mouseup(function() {
$(document).off('mousemove');
});
})
})
</script>
</body>
</html>
页面头部固定，下面随着内容的增多滚动，但是头部不动的效果
positive:fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>头部一直置顶</title>
<style>
.header{
position: fixed;
background-color: pink;
width: 100%;
line-height: 60px;
}
</style>
</head>
<body>
<div class="header">
页面头部固定，下面随着内容的增多滚动，但是头部不动的效果
</div>
<div id="container">
<ul>
<li><a href="#">测试内容</a></li>
......
</ul>
</div>
</body>
</html>
让ul li里面的内容横排
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#menu{
position: fixed;
background-color: pink;
line-height: 50px;
width: 100%;
text-align: center;
}
ul li{
list-style: none;
display: inline-block;
margin-right: 30px;
}
</style>
</head>
<body>
<ul id="menu">
<li>精品阅读</li>
<li>管理书籍</li>
<li>用户登录</li>
<li>用户退出</li>
<li>用户注册</li>
</ul>
</body>
</html>
给按钮一个渐变颜色，以及右括号的制作(>)（左括号$lt依旧如此）
< less than, <
> greater than,>
background-image: -webkit-linear-gradient(left,blue,pink);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>给按钮一个渐变的颜色</title>
<style>
#btn{
border-radius: 30px;
background-image: -webkit-linear-gradient(left,blue,pink);
font-size: 6px;
width: 120px;
height: 60px;
}
#btn::after {
content: "";
position: absolute;
width: 7px;
height: 7px;
border-top: 2px solid red;
border-right: 2px solid red;
transform: rotate(45deg);
}
</style>
</head>
<body>
<button id="btn">用户注册</button>
</body>
</html>
图片在div中显示
改变图片的比例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#left{
width: 18%;
border-right: 2px solid #fff;
margin: 0 auto;
}
#left img{
width: 100%;
}
</style>
</head>
<body>
<div id="footer" >
<div id="left">
<img src="../image/1.jpg" alt="">
</div>
</div>
</body>
</html>
盒子模型
background-color: #F6F6F6;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
#left{
width: 18%;
border-right: 2px solid #fff;
margin: 0 auto;
}
#left img{
width: 100%;
}
#footer{
position: relative;
background-color: #F6F6F6;
}
#right{
position: absolute;
top: 27px;
right: 343px;
}
#right_top{
width: 170px;
height: 68px;
border: 3px solid #fff;
margin-left: -15px;
margin-top: -22px;
text-align: center;
line-height: 68px;
}
#bottom_left, #bottom_right{
border: 3px solid #fff;
width: 84px;
height: 70px;
}
#bottom_left{
float:left;
margin-left: -18px;
}
#right_bottom{
border: 3px solid #fff;
position: relative;
}
#bottom_right{
position: absolute;
left: 70px;
}
</style>
</head>
<body>
<div id="footer" >
<div id="left">
<img src="../image/1.jpg" alt="">
<div>
<span>这是一幅多么美的图片啊</span>
</div>
</div>
<div id="right">
<div id="right_top">
爱生活,爱学习
</div>
<div id="right_bottom">
<div id="bottom_left">
生活不易，且行且珍惜
</div>
<div id="bottom_right">
有种生活叫做情调
</div>
</div>
</div>
</div>
</body>
</html>
用js来生成小圆点
组装dom节点的一个思路：
先创建好
<div class="index_box">
<ol>
</ol>
</div>
我们动态通过js往ol子节点插入li标签；
这个时候要创建li标签
let indexBox = document.querySelector(".index_box");
<!--创建li标签-->
let frg = document.createDocumentFragment();
for(let i=0;i<3;i++){
let li = document.createElement("li");
li.setAttribute("data-index",i+1);
frg.appendChild(li);
}
indexBox.children[0].style.width = 60+"px";//相当于ol标签加了宽度样式
//<ol style="width:60px"></ol>
indexBox.children[0].appendChild(frg);//然后把li标签插入到ol标签
有这些标签这个时候可以写样式了：
<style>
.index_box ol{
display: flex;
}
.index_box ol li{
width: 10px;
height: 10px;
border-radius: 50%;
background: red;
list-style: none;
display: flex;
}
</style>
选项卡的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tab选项卡</title>
</head>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
.warpper {
border: 1px solid red;
width: 408px;
height: 320px;
margin: auto;
}
.line {
width: 408px;
height: 55px;
text-align: center;
}
.line>li {
list-style: none;
color: red;
border: 1px solid red;
float: left;
width: 100px;
}
#div-v {
background-color: antiquewhite;
}
#div1,
#div2,
#div3,
#div4 {
color: red;
text-align: center;
display: none;
}
#div1 {
display: block;
}
</style>
<script >
function show(n,m) {
//alert(n)
// 将所有div i<4写n就会导致不能够把其他隐藏，因为n是自己传过去的内容隐藏
for (let i = 1; i <=4 ; i++) {
let AllObj = document.getElementById("div"+i);
AllObj.style.display="none";
}
let s = document.getElementById("div"+n);
s.style.display="block";
}
</script>
<body>
<div class="warpper">
<ul class="line">
<li id="li1" onclick="show(1,this)">精品课程</li>
<li id="li2" onclick="show(2,this)">vip课程</li>
<li id="li3" onclick="show(3,this)">免费听课</li>
<li id="li4" onclick="show(4,this)">用户登录</li>
</ul>
<div id="div-v">
<div id="div1">
精品课程
</div>
<div id="div2">
vip课程
</div>
<div id="div3">
免费听课
</div>
<div id="div4">
用户登录
</div>
</div>
</div>
</body>
</html>
原生js实现点哪个就高亮哪个
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>选项卡</title>
<style type="text/css">
#login{
background: pink;
width: 100%;
float: right;
}
ul li{
list-style: none;
display: inline-block;
}
a{
text-decoration: none;
}
#login li.on {
background:red;
}
</style>
</head>
<body>
<div>
<ul id="login">
<li class="on"><a href="#">用户登录</a></li>
<li><a href="#">用户注册</a></li>
</ul>
</div>
<script type="text/javascript">
let login = document.getElementById("login");
for(let i = 0;i<login.children.length;i++){
//document.write(li[i].textContent);
login.children[i].onclick=function (e) {
// alert(this)
for(i=0; i<login.children.length; i++) {
login.children[i].className='';
}
this.className='on';
}
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
