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());
})
图片的话自己找吧
随机推荐
- MySQL的那些坑
1. 表名一定要区分大小写,不一致就会报错 2. 无隐式的类型转换 (比如对某数值进行排序时,原表字段存储却是varchar型,就会对该数值按字符串排序而非数值大小!) 3. group by 也能 ...
- Job for keepalived.service failed because the control process exited with error code. See "systemctl status keepalived.service" and "journalctl -xe" for details.
解决方案 https://blog.csdn.net/zt15732625878/article/details/86493096
- ARP Poisoning Attack and Mitigation Techniques ARP欺骗 中间人攻击 Man-In-The-Middle (MITM) attack 嗅探 防范 Can one MAC address have two different IP addresses within the network?
小结: 1. ARP缓存投毒,窃听中毒者之间的通信: 2. ARP Poisoning Attack and Mitigation Techniques - Ciscohttps://www.cisc ...
- mongodb download
https://www.mongodb.org/dl/win32/x86_64-2008plus-ssl
- c++ 容器中元素计数
#include <iostream>#include <algorithm>#include <vector>#include <functional> ...
- 20 Flutter仿京东商城项目 商品详情 底部弹出筛选属性 以及筛选属性页面布局
ProductContentFirst.dart import 'package:flutter/material.dart'; import '../../widget/JdButton.dart' ...
- OpenLDAP管理命令详解
一.OpenLDAP命令汇总 ldapsearch:搜索 OpenLDAP 目录树条目. ldapadd:通过 LDIF 格式,添加目录树条目. ldapdelete:删除 OpenLDAP 目录树条 ...
- Leetcode之236. Lowest Common Ancestor of a Binary Tree Medium
236. Lowest Common Ancestor of a Binary Tree Medium https://leetcode.com/problems/lowest-common-ance ...
- 《剑指offer》数组专题 (牛客10.22)
目录 // Q01 二维部分有序数组查找 [善用性质] // Q06 旋转数组中的最小元素 [二分 || 暴力] Q13 调整数组顺序使奇数位于偶数前 / Q19 顺时针打印矩阵 [使用边界变量] / ...
- 前端入门系列之HTML
前端入门系列之HTML 超文本标记语言 (英语:Hypertext Markup Language,简称:HTML ) 是一种用来结构化 Web 网页及其内容的标记语言.网页内容可以是:一组段落.一个 ...