HTML练习一
效果图
动态图
html代码
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>主页</title>
<link rel="stylesheet" type="text/css" href="static/content/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="static/content/index.css" />
</head> <body>
<!--背景-->
<div class="bg">
<img src="static/image/bg-timg2.jpg" width="100%" height="100%" />
</div>
<!--头部-->
<div class="container logo-search">
<div class="row">
<div class="logo">
<h1 style="margin-top: 10px;">HTML练习</h1>
</div>
<div class="search">
<input type="text" class="placeholder" id="s" name="s" placeholder="搜索……" autocomplete="off">
</div>
</div>
</div>
<!--导航栏-->
<div class="container navigation">
<div class="row">
<ul>
<li>
<a>首页</a>
</li>
<li>
<a>菜单1</a>
</li>
<li>
<a>菜单2</a>
</li>
<li>
<a>菜单3</a>
</li>
<li>
<a>菜单4</a>
</li>
<li>
<a>菜单5</a>
</li>
<li>
<a>菜单6</a>
</li>
<li>
<a>菜单7</a>
</li>
</ul>
</div>
</div>
<!--内容-->
<div class="container main">
<div class="row">
<!--左边-->
<div class="all-column left-column">
<div class="tab">
CSS教程
</div>
<div class="sidebar-box">
<a class="top_tit" target="_top" title="CSS Text(文本)" style="font-weight: bold; color: rgb(255,255,255); background-color: rgb(150,185,125);" href="javascript:void(0)">CSS Text(文本)</a>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS Fonts(字体)</a>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS 链接(link)</a>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS 列表样式(ur)</a>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS 表格(table)</a> <a class="top_tit" target="_top" title="CSS Text(文本)" style="font-weight: bold; color: rgb(255,255,255); background-color: rgb(150,185,125);" href="javascript:void(0)">CSS Text(文本二)</a>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS Fonts(字体二)</a>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS 链接(link二)</a>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS 列表样式(ur二)</a>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS 表格(table二)</a>
</div>
</div>
<!--中间-->
<div class="all-column main-column">
<!--轮播图片-->
<div class="tempWrap">
<ul>
<li>
<a href="">
<img src="static/image/banner1.jpg" />
</a>
</li>
<li>
<a href="">
<img src="static/image/banner2.jpg" />
</a>
</li>
<li>
<a href="">
<img src="static/image/banner3.jpg" />
</a>
</li>
</ul>
<ol class="tempWrap-ol">
<li style="background-color: #222222;">1</li>
<li>2</li>
<li>3</li>
</ol>
</div> <!--内容-->
<div class="main-content">
内容
</div>
</div>
<!--右边-->
<div class="all-column right-column">
<div class="tab right-box right-tab">
分类导航
</div>
<div class="sidebar-box right-box">
<ul>
<li>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">服务端</a>
<ul class="right-tree">
<li>
<a>首页</a>
</li>
<li>
<a>菜单1</a>
</li>
<li>
<a>菜单2</a>
</li>
<li>
<a>菜单3</a>
</li>
<li>
<a>菜单4</a>
</li>
<li>
<a>菜单5</a>
</li>
<li>
<a>菜单6</a>
</li>
<li>
<a>菜单7</a>
</li>
<li>
<a>菜单87</a>
</li>
</ul>
</li>
<li>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">客户端</a>
<ul class="right-tree">
<li>
<a>首页</a>
</li>
</ul>
</li>
<li>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">数据库</a>
<ul class="right-tree">
<li>
<a>首页</a>
</li>
</ul>
</li>
<li>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">测试</a>
<ul class="right-tree">
<li>
<a>首页</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--底部-->
<div class="footer">
<div class="row footer-data">
Copyright © 2013-2019
<strong>
<a href="//www.runoob.com/" target="_blank">菜鸟教程</a>
</strong>
<strong>
<a href="//www.runoob.com/" target="_blank">runoob.com</a>
</strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
</div>
</div>
<!--返回顶部标签-->
<div class="fixed-btn">
<a class="go-top" href="javascript:void(0)" title="返回顶部" style="display: inline-block;"><i class="glyphicon glyphicon-chevron-up"></i></a>
<a class="qrcode" href="javascript:void(0)" title="关注我们"><i class="glyphicon glyphicon-qrcode"></i></a>
<a class="writer" style="" href="javascript:void(0)" title="标记/收藏"><i class="glyphicon glyphicon-star-empty" aria-hidden="true"></i></a>
<!-- qrcode modal -->
<div id="bottom-qrcode" class="modal-fade" style="display: none;">
<h4>微信关注</h4>
<div class="panel-body"><img alt="微信关注" src="static/image/1.png"></div>
</div>
</div> <script src="static/scripts/jQuery-2.2.0.min.js"></script>
<script src="static/scripts/bootstrap.min.js"></script>
<script src="static/scripts/index.js"></script>
</body> </html>
css代码：
.::after,.::before{
content: "";
display: table;
}
.::after,.::before{
clear: both;
}
body,ul,li{
margin:;
padding:;
color: #000000;
list-style: none;
}
div,li{
display: block;
}
.bg {
width: 100%;
min-width: 1000px;
height: 100%;
min-height: 1000px;
position: fixed;
z-index: -1;
}
.container {
margin: 0 auto;
padding: 0 10px;
}
/*头部*/
.logo-search{
width: 100%;
height: 80px;
padding: 10px 0 10px 20px;
overflow: hidden;
/*border: solid 1px yellow;*/
}
.logo{
width: 60%;
margin-right: 1%;
float: left;
}
.search{
width: 30%;
float: left;
}
.placeholder{
line-height: 34px;
left: 9px;
margin-top: 10px;
text-align: initial;
white-space: nowrap;
right: 9px;
height: 35px;
width: 94%;
padding: 0 3% 0 3%;
background-color: #fff;
border: 1px solid #c8c8c8;
border-radius: 3px;
color: #ccc;
font-weight:;
font-size: 1.2em;
}
/*导航栏*/
.navigation {
width: 100%;
height: 40px;
background-color: yellowgreen;
font-size: 1.1em;
font-family: proxima-nova,'Helvetica Neue',Helvetica,Arial,sans-serif;
overflow: hidden;
}
.row{
max-width: 1260px;
min-width: 755px;
margin: 0 auto;
padding:0 10px;
}
.navigation .row ul{
height: 40px;
padding: 10px 0 10px 10px;
list-style: nnone;
white-space: nowrap;
}
.navigation .row ul li{
float: left;
margin: 0 20px 0 0;
display: inline;
line-height: 20px;
text-align: center;
white-space: nowrap;
}
.navigation .row ul li a{
color: #FFFFFF;
padding: 10px 0 10px 0;
margin: 10px 0 0 0;
text-decoration: none;
}
.navigation .row ul li a:hover{
color: #CFCFCF;
}
/*内容*/
.main {
margin-top: 20px;
width: 100%;
}
.all-column{
margin-right: 1%;
float: left;
}
.left-column{
width: 14%;
/*height: 1000px;*/
/*border: solid 1px red;*/
}
.tab{
opacity: .7;
padding-left: 4px;
font-size: 1.2em;
line-height: 1.9em;
font-family: proxima-nova,'Helvetica Neue',Helvetica,Arial,sans-serif;
color: grey;
text-shadow: 0 1px 0 rgba(255,255,255,.15);
border: solid 1px rgba(0,0,0,.1);
border-bottom:;
background-clip: padding-box;
background-color: #f2f2f2;
}
.sidebar-box{
background: #fff;
margin: 5px 0 20px 0;
}
.sidebar-box a{
line-height: 20px;
text-decoration: none;
color: #000000;
background-color: #f6f4f0;
padding: 4px;
border-bottom: 1px solid #efefef;
display: block;
}
.sidebar-box a:hover{
font-weight: bold;
color: #2AABD2;
background-color: #CFCFCF;
}
.main-column{
width: 68%;
/*height: 1500px;*/
/*border: solid 1px #007BFF;*/
}
.tempWrap{
width: 100%;
height: 400px;
/*border: solid 1px #007BFF;*/
position: relative;
overflow: hidden;
}
.tempWrap ul li a img{
width: 100%;
height: 100%;
}
.tempWrap ul{
width: 300%;
position: relative;
overflow: hidden;
padding: 0px;
margin: 0px;
left: 0%;
}
.tempWrap ul li{
width: 33.33%;
height: 400px;
float: left;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
}
.tempWrap-ol {
position: absolute;
z-index:;
left:;
right:;
bottom: 10px;
padding: 0 10px;
text-align: center;
display: inline-block;
}
.tempWrap-ol li{
width: 10px;
height: 10px;
font-size:;
line-height:;
border-radius: 50%;
display: inline-block;
text-align: center;
margin-right: 10px;
background-color: #c2c2c2;
cursor: pointer;
}
.main-content {
width: 100%;
height: 1000px;
border: solid 1px #007BFF;
font-size: 50px;
line-height: 500px;
text-align: center;
}
.right-column{
width: 14%;
/*height: 1000px;
border: solid 1px #101010;*/
}
.right-tab{
font-size: 30px;
font-weight: bold;
line-height: 50px;
}
.right-box{
margin:;
padding:;
text-align: center;
}
.right-box > ul > li{
margin: 5px 0 0 0;
position: relative;
vertical-align: middle;
cursor: pointer;
}
.right-box ul li a{
line-height: 30px;
}
.right-box > ul > li:hover > a{
font-weight: bold;
text-decoration: underline;
color: #3E8F3E;
background-color: #CFCFCF;
}
.right-box ul li:hover > ul{
display: block;
}
.right-tree {
position: absolute;
width: 300px;
/*height: 200px;*/
background: #f6f4f0;
right: 100%;
top:;
display: none;
float: left;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.right-tree li{
width: 140px;
margin: 5px;
float: left;
display: inline;
line-height: 20px;
text-align: center;
white-space: nowrap;
}
.right-tree li a{
color: #000000;
text-decoration: none;
}
.right-tree li a:hover{
color: #007BFF;
text-decoration: underline;
}
/*底部*/
.footer{
width: 100%;
height: 60px;
margin-top: 20px;
/*background-color: #fff;*/
}
.footer-data{
line-height: 60px;
text-align: center;
color: #000000;
font-size: 14px;
}
/*返回顶部标签*/
.fixed-btn{
position: fixed;
right: 1%;
bottom: 5%;
width: 40px;
border: 1px solid #eee;
background-color: white;
font-size: 24px;
z-index:;
}
.fixed-btn .go-top {
border-bottom: 1px solid #eee;
}
.fixed-btn a {
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
color: #64854c;
text-decoration: none;
}
.fixed-btn a:hover {
background-color: #CFCFCF;
}
.fixed-btn a:after {
content: ".";
font-size:;
height: 100%;
display: inline-block;
vertical-align: middle;
}
.fixed-btn a i {
vertical-align: middle;
}
.fa {
display: inline-block;
font-family: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
}
.fixed-btn .modal-fade {
top: auto;
bottom:;
height: 188px;
width: 128px;
padding: 10px;
margin:;
right: 65px;
left: auto;
text-align: center;
position: absolute;
}
.fixed-btn .modal-fade:after,
.fixed-btn .modal-fade:before{
position: absolute;
top: 109px;
right: -100px;
content: '';
display: inline-block;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid white;
}
.panel-modal .panel-body {
overflow-y: auto;
}
.panel-body .panel-body img{
width: 128px;
height: 128px;
}
js代码：
$(function() {
//返回顶部标签
$(window).scroll(function() {
if($(window).scrollTop() > 100) {
$(".go-top").fadeIn(150);
} else {
$(".go-top").fadeOut(150);
}
});
$(".go-top").click(function() {
if($('html').scrollTop()) {
$('html').animate({
scrollTop: 0
}, 100);
return false;
}
$('body').animate({
scrollTop: 0
}, 100);
return false;
});
//微信二维码显示
$('.qrcode').hover(function() {
$('#bottom-qrcode').css({"display": "block"})
},function() {
$('#bottom-qrcode').css({"display": "none"})
}
);
//右侧菜单显示
// $('.right-box ul li a').hover(function() {
// $(".right-box ul li a + ul").addClass("blue");
// $('.blue').css({"display": "block"})
// },function() {
// $('.blue').css({"display": "none"})
// $(".right-box ul li a + ul").removeClass("blue");
// }
// );
//轮播图片
var index = 0;
function selectImage(liindex){
index = liindex;
var perleft = -index * 100;
$(".tempWrap ul").animate({"left": perleft + "%"});
// $('.tempWrap ul').css({"left": perleft + "%"});
$('.tempWrap-ol li').css({"background-color": "#c2c2c2"});
$('.tempWrap-ol li').eq(liindex).css({"background-color": "#222222"});
};
$('.tempWrap-ol li').click(function(e){
var i = parseInt(e.target.textContent);
selectImage(i-1);
});
function startImage(){
if(index == 2){
index = 0;
}else{
index++;
}
selectImage(index);
setTimeout(function(){ startImage(); } , 3000);
};
$('.tempWrap').onLoad(startImage());
})
图片的话自己找吧
随机推荐
- oracle OPEN FOR [USING] 语句
目的: 和ref cursor配合使用, 可以将游标变量分配给不同的SQL (而不是在declare中把游标给定死), 增加处理游标的灵活性语法: declare type type_c ...
- mongodb 添加用户报错TypeError:db.addUser is not a function (mongodb3.4.1)
1:问题如下: 原因是 新版的MongoDB已经不支持addUser方法了. 改成createUser了. 使用方法如下 2:具体解释一下db.createUser()方法的用法 定义: 创 ...
- linux简单命令3---帮助命令
1:帮助命令:man 命令: 2:这个帮助用的比较多(还是中文):命令 --help 3:shell帮助 4:详细命令(比man更详细)帮助,用的少,比较麻烦:info
- 一百二十九：CMS系统之七牛云存储介绍和配置
将图片的存储.尺寸等图片本身的一些擦做,交给七牛云处理,自己只关注网站开发本身 七牛云官网:https://www.qiniu.com 操作 登录后,点击管理控制台 点击对象存储-->新建存储空 ...
- ubuntu kylin 18.04安装docker笔记
删除原有的docker应用(如果有的话): sudo apt-get remove docker docker-engine docker.io 更新一下: sudo apt-get update 下 ...
- Spring Aop（一）——Aop简介
转发地址:https://www.iteye.com/blog/elim-2394629 1 Aop简介 AOP的全称是Aspect Oriented Programming,翻译成中文是面向切面编程 ...
- The input file should be UTF8 without a byte-order-mark(BOM)
byte-order-mark = (BOM) 在unicode诸编码中,字节顺序标记-BOM被用于标记编码高低位的顺序. .BOM是一个特殊的unicode字符.早期标准定义其为“零长度.非断行的空 ...
- JAVA数据结构和算法 3-简单排序
排序中的两种基本操作是比较和交换.在插入排序中还有移动. 冒泡排序:两两比较相邻元素,如果较大数位于较小数前面,则交换: 每一趟遍历将一个最大的数移到序列末尾,共遍历N-1趟. 如果执行完一趟之后没有 ...
- 最新 央视网java校招面经 （含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.央视网等10家互联网公司的校招Offer,因为某些自身原因最终选择了央视网.6.7月主要是做系统复习.项目复盘.LeetCo ...
- POJ 3274/洛谷 1360:Gold Balanced Lineup 黄金阵容平衡
题目描述 Farmer John's N cows (1 ≤ N ≤ 100,000) share many similarities. In fact, FJ has been able to na ...