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());
})
图片的话自己找吧
随机推荐
- Linux设备驱动程序 之 vmalloc
vmalloc()函数的工作方式类似于kmalloc(),只不过在前者分配的内存虚拟地址是连续的,而物理地址则无须连续:这也是用户空间分配函数的工作方式:由malloc()返回的页在进程的虚拟地址空间 ...
- 性能优化 | JVM性能调优篇——来自阿里P7的经验总结
VM 调优概述: 性能定义: 吞吐量 - 指不考虑 GC 引起的停顿时间或内存消耗,垃圾收集器能支撑应用达到的最高性能指标. 延迟 - 其度量标准是缩短由于垃圾啊收集引起的停顿时间或者完全消除因垃圾收 ...
- <JavaScript> 稳妥构造函数模式与工厂模式的区别
稳妥构造函数模式的代码应该是这样的: function Person(name, age, job) { var o = new Object(); // private members var na ...
- LC 985. Sum of Even Numbers After Queries
We have an array A of integers, and an array queries of queries. For the i-th query val = queries[i] ...
- ERS：百科
ylbtech-ERS:百科 ERS=(Enterprises Run System)企业运行系统 企业运行系统-ERS,是继ERP系统之后的企业管理控制软件系统的终极形式,有着非常美好的市场前景,尤 ...
- kotlin之函数的基本用法
fun main(arg: Array<String>) { val )//调用函数 print(double) } fun double(x:Int):Int{ *x } kotlin函 ...
- qt ui
/******************************************************************************** ** Form generated ...
- 依靠MySQL(frm、MYD、MYI)数据文件恢复
该方法并不是适用于所有MySQL数据库 此次恢复是朋友那边的数据查不了了,请求我支援,出于各种心理原因,我答应试试,于是就有了这篇文章和这次经历,废话不多说.... 物理条件:宿机是Ubuntu16. ...
- JMeter 不同线程组间变量传递(亲测 ok)
JMeter元件都是有作用域的,而变量大多使用正则表达式提取器,要想在不通过线程组件使用变量参数,则需要设置全部变量 JMeter函数助手就提供了一个函数用于设置全局变量属性,实现的功能类似于在用户自 ...
- DataFrame执行groupby聚合操作后，如何继续保持DataFrame对象而不变成Series对象
刚接触pandas不久,在处理特征时,碰到一个恶心的问题:用groupby聚合后,之前的dataframe对象变成了series对象,聚合的字段变成了索引index,导致获取这些字段时很麻烦,后面发现 ...