第一次正式的网页制作
来源：互联网 发布：mysql web报表 编辑：程序博客网 时间：2024/05/17 04:55
这是自己第一次参与正规网站制作，其中头(header.html)和尾(footer.html)都放在另一个公用文档中 ，引用时通过ajax进行引用 ，所以要配置 iis ,此外也使用了iconfont图标,并将css，js与html完全分开：
1.它主要的核心html代码如下：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>test</title> <link rel="icon" href="favicon.ico" /> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/swiper.min.css"> <link rel="stylesheet" href="css/use-arctile1.css"> <link href="css/animate.min.css" rel="stylesheet"> <script type="text/javascript" src="iconfont/user-font/iconfont.js"></script> <script type="text/javascript" src="iconfont/iconfont.js"></script> <script type="text/javascript" src="iconfont/icon/iconfont.js"></script> <script type="text/javascript" src="iconfont/use-arctile/iconfont.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <!--<script type="text/javascript" src="js/userCenter.js"></script>--> <!-- common css end --></head><style type="text/css">.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden;}</style><body><!-- head 开始 --><div id="header"></div><script type="text/javascript"> $(document).ready(function(){ $.ajax({ url:"commons/header.html", success:function(wm){ $("#header").html(wm); } }); });</script><!-- head 结束 --><div class="content"> <div class="container"> <div class="fl-content fl"> <div class="top" > <div class="box-user"> <div class="user-img" style="background-image: url(imgs/user-center-bg.jpg)"> <a href="#" class="user-head" ></a> <i class="user-center"></i> </div> <div class="user-info"> <a href="#"> <span>小我也有烦恼的时候</span> <svg class="icon" aria-hidden="true" style="width: 1em; height: 1em;font-size:18px;vertical-align: -0.15em;display: block;display: inline-block; border-bottom-width: 1px;font-size: 16px;: currentColor;overflow: hidden;float:right;"> <use xlink:href="#icon-gerenzhongxin"></use> </svg> </a> </div> <div class="user-atten"> <ul class="clearfix"> <li> <a href="#"> <span class="strong">8</span> <span class="info">关注</span> </a> </li> <li class="line"></li> <li> <a href="#"> <span class="strong">20</span> <span class="info">粉丝</span> </a> </li> <li class="line"></li> <li> <a href="#"> <span class="strong">100</span> <span class="info">文章</span> </a> </li> </ul> </div> </div> </div> <div class="table"> <ul class="choice"> <li class="ch" style="margin-top: 10px"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-account"></use></svg> <a class="basical-setting">基本设置</a> </li><li class="ch"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-account"></use></svg> <a class="personal-information">个人资料</a> </li><li class="ch"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-favorite"></use></svg> <a class="my-focus">我的关注</a> </li><li class="ch"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-form"></use></svg> <a class="my-articles">我的文章</a> </li><li class="ch"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-link"></use></svg> <a class="accounts-manage">账号管理</a> </li> </ul> </div> </div> <div class="content-right"> <div class="border_header"> <div class="border_header_left"> <a href="#"><b>我收藏的文章(共25篇)</b></a> </div> <div class="border_header_right"> <div class="border_header_right_left"> 热门收藏 </div> <div class="border_header_right_right"><a href="">发现你可能感兴趣的文章...</a> </div> </div> </div> <div class="border_one"> <div class="border_one_top"> <div class="neirong-left"> <div class="neirong1"> <p><b>荐</b> . 江江也叫Glowin . 9个小时前 . 程序员/VIM</p> </div> <div class="neirong2"> <p> <a href="#" id="neirong2">StackOverflow骄傲的宣布：已帮助100万不知如何从VIM退出的程序员 </a> </p> </div> </div> <div class="neirong-content"> <div class="neirong3"> <a href="#"> <img src="imgs/faq_1.jpg" id="neirong3"> </a> </div> <div class="neirong4"> <a href="#">收藏于2014-8-24</a> </div> </div> <div class="neirong-right"> <svg class="icon3" aria-hidden="true"> <use xlink:href="#icon-x"></use> </svg> </div> </div> <div class="border_one_bottom"> <a href="#"> <div class="border_one_bottom_1"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shoucang" style="color: skyblue"></use> </svg> 已收藏 </div > </a> <a href="#"> <div class="border_one_bottom_1"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-zhuanfa2"></use> </svg> 转发 </div> </a> <a href="#"> <div class="border_one_bottom_1"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-pinglun" style="color: skyblue;font-size: 3em;"></use> </svg> 评论 </div> </a> <a href="#"> <div class="border_one_bottom_1"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-zan" style="color: skyblue"></use> </svg> 赞 </div> </a> </div> </div> <div class="border_one"> <div class="border_one_top"> <div class="neirong-left"> <div class="neirong1"> <p><b>专栏</b> . 悦动圈 . 9个小时前 . PHP/前端</p> </div> <div class="neirong2"> <p> <a href="#" id="neirong2">【广州】【15k-17k】爱跑步吗？我们我们服务过3500万跑步爱好者，悦动圈邀... </a> </p> </div> </div> <div class="neirong-content"> <div class="neirong3"> <a href="#"> <img src="imgs/faq_2.jpg" id="neirong3"> </a> </div> <div class="neirong4"> <a href="#">收藏于2014-6-5</a> </div> </div> <div class="neirong-right"> <svg class="icon3" aria-hidden="true"> <use xlink:href="#icon-x"></use> </svg> </div> </div> <div class="border_one_bottom"> <a href="#"> <div class="border_one_bottom_1"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shoucang" style="color: skyblue"></use> </svg> 已收藏 </div > </a> <a href="#"> <div class="border_one_bottom_1"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-zhuanfa2"></use> </svg> 转发 </div> </a> <a href="#"> <div class="border_one_bottom_1"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-pinglun" style="color: skyblue;font-size: 3em;"></use> </svg> 评论 </div> </a> <a href="#"> <div class="border_one_bottom_1"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-zan" style="color: skyblue"></use> </svg> 赞 </div> </a> </div> </div> <div class="border_one"> <div class="border_one_top"> <div class="neirong-left"> <div class="neirong1"> <p><b></b> . airsaid . 3个小时前 . Android/GitHub/App</p> </div> <div class="neirong2"> <p> <a href="#" id="neirong2">大大记账本：一个数据存储使用的learncloud、架构采用MVP的记账本A... </a> </p> </div> </div> <div class="neirong-content"> <div class="neirong3"> <a href="#"> <img src="imgs/faq_3.jpg" id="neirong3"> </a> </div> <div class="neirong4"> <a href="#">收藏于2014-5-4</a> </div> </div> <div class="neirong-right"> <svg class="icon3" aria-hidden="true"> <use xlink:href="#icon-x"></use> </svg> </div> </div> <div class="border_one_bottom"> <a href="#"> <div class="border_one_bottom_1"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shoucang" style="color: skyblue"></use> </svg> 已收藏 </div > </a> <a href="#"> <div class="border_one_bottom_1"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-zhuanfa2"></use> </svg> 转发 </div> </a> <a href="#"> <div class="border_one_bottom_1"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-pinglun" style="color: skyblue;font-size: 3em;"></use> </svg> 评论 </div> </a> <a href="#"> <div class="border_one_bottom_1"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-zan" style="color: skyblue"></use> </svg> 赞 </div> </a> </div> </div> <div class="border_one"> <div class="border_one_top"> <div class="neirong-left"> <div class="neirong1"> <p><b></b> . tennylv . 3个小时前 . 前端</p> </div> <div class="neirong2"> <p> <a href="#" id="neirong2">移动web之滚动篇 </a> </p> </div> </div> <div class="neirong-content"> <div class="neirong3"> <a href="#"> <img src="imgs/faq_4.jpg" id="neirong3"> </a> </div> <div class="neirong4"> <a href="#">收藏于2014-8-24</a> </div> </div> <div class="neirong-right"> <svg class="icon3" aria-hidden="true"> <use xlink:href="#icon-x"></use> </svg> </div> </div> <div class="border_one_bottom"> <a href="#"> <div class="border_one_bottom_1"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shoucang" style="color: skyblue"></use> </svg> 已收藏 </div > </a> <a href="#"> <div class="border_one_bottom_1"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-zhuanfa2"></use> </svg> 转发 </div> </a> <a href="#"> <div class="border_one_bottom_1"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-pinglun" style="color: skyblue;font-size: 3em;"></use> </svg> 评论 </div> </a> <a href="#"> <div class="border_one_bottom_1"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-zan" style="color: skyblue"></use> </svg> 赞 </div> </a> </div> </div> </div> </div> </div> <!-- footer 开始 --> <div id="footer"></div> <script type="text/javascript"> $(document).ready(function(){ $.ajax({ url:"commons/footer.html", success:function(wm){ $("#footer").html(wm); } }); }); </script> <!-- footer 结束 --> </body></html>2.其对应的.css代码如下：
body{ background: #0E0307 url(../imgs/login-register.jpg) no-repeat top center; margin: 0;}.icon { width: 1em; height: 1em; font-size: 18px; vertical-align: -0.15em; margin: 2px 10px 0px 0px; fill: currentColor; overflow: hidden; display:block; float:left;}.icon3 { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden;}.content{ margin:0px;}.content .container{ height:1200px; width: 1356px;}.container .fl-content{ float: left; margin-top: 80px; margin-left: 100px; height: 800px; width:250px;;}.fl-content .top{ width:100%; height: 220px; margin-bottom: 20px; background-color: #ffffff; border-radius: 10px; box-shadow: 1px 1px 1px grey ; color: #545454;}.fl-content .table{ width: 100%; height: 300px; border-radius: 10px; background-image: url(../imgs/banner_1.jpg); filter:alpha(Opacity=50); opacity: 0.5;}.table .choice{ width: 100%; height:280px; margin: 0 20 0 0; padding-top: 20px;}.choice .ch{ width: 200px; height: 22px; padding: 5px 20px 5px 30px; margin-top: 25px;}.box-user .user-img{ display: block; width: 100%; height: 100px; margin: 0; border-top-left-radius: 10px; border-top-right-radius: 10px;}.box-user .user-info{ padding:45px 50px 0px 50px; width: 150px; height: 35px; margin: 0;}.box-user .user-atten{ width: 100%; height: 40px; margin: 0; } .user-img .user-head{ display: block; width: 70px; height: 70px; background-image: url(../imgs/banner_2.jpg); margin: 0px; border-radius: 50%; background-size: cover; background-position: center center; position: relative; top: 75px; left: 90px;}.box-user .user-info a span{ max-width: 114px; _width: 114px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font: 14px/1.3 'Arial','Microsoft YaHei'; font-weight: bold; color: #333;}.box-user .user-atten .clearfix{ width: 220px; padding: 8px 15px;}.user-atten .clearfix li{ float:left; display: block; text-align: center; width: 33%; height: 100%;}.table .choice .ch a{ display: block; float:left; display: inline-block; border-bottom-width: 1px; font-size: 16px; margin-left: 30px;}.choice .ch:hover{ border-left: 3px black solid; position: relative; top: 2px; left: 2px}.choice .ch .icon:visited{ font-weight: bold;}.table .choice .ch a:hover{ color: black; font-weight: 15px;}.user-atten .clearfix a:hover{ color: black; font-weight: 2px;}.container .content-right{ background-color: #EEE8AA; float: left; border: 3px solid #2F4F4F; margin:80px 0px 0px 150px; height: 1000px; width: 750px; border-radius: 10px; box-shadow: 10px 10px 5px black;}.border_header{ height: 60px; width: 95%; margin-left: 20px;}.border_header_left{ float: left; border-bottom: 1px solid red; width: 200px; margin-left: 5px; height: 25px; padding-top: 20px; padding-bottom:0px; padding-left: 5px; font-size: large; color: black;}.border_header_left:hover{ background-color: #EEE8AA; font-size: larger;}.border_header_right{ float: left; border-bottom: 1px solid black; width:495px; margin-left: 5px; margin-top: 20px;}.border_header_right_left{ float: left; color: #008B8B; font-size: large; font-weight: bold;}.border_header_right_right{ float: left; color: #87CEEB; font-weight: bold; margin-left: 130px;} .border_header_right_right:hover{ font-weight: bold; color: skyblue;}.border_one{ border-bottom:1px solid #2F4F4F; box-shadow:2px red; height: 200px; width: 95%; margin-left:20px;}.border_one .border_one_top{ border-bottom: 1px solid #008B8B; height: 155px; width:700px; margin-left: 5px;} .neirong-left{ float: left; width: 500px; height: 145px; margin-top: 5px;}.neirong1{ width:100%; height: 20px;}.neirong1 p b{ color: red;}.neirong1 p{ color:white;}.neirong2{ text-overflow:ellipsis; width:100%; height:80px; padding-top: 5px;}.neirong2 p a{ font-size: large; font-weight: 700; color: skyblue;}.neirong2 p a:hover{ color: white;}.neirong-content{ float: left; width: 150px; height: 145px; margin-top: 5px; margin-left: 5px; }.neirong3 #neirong3{ width: 130px; height: 125px; border-radius: 10px; overflow: hidden; margin-left: 10px;}.neirong4{ width: 135px; height: 20px; color: white; font-size: small; margin-left:20px;}.neirong-right{ float: left; width: 30px; height: 145px; margin-top: 5px; margin-left: 5px;}.border_one .border_one_bottom{ height:40px; width:700px;}.border_one_bottom .border_one_bottom_1{ float: left; color: skyblue; border-radius: 8px; margin-top: 2px; margin-right: 30px; padding-right: 10px; text-align: center; font-family: "柳体","黑体"; font-weight: bold; padding-top: 10px; height: 30px; width: 130px;}.border_one_bottom .border_one_bottom_1:hover{ background-color: #008B8B; color: #EEE8AA; font-weight: bold; font-size: large;}.border_one_bottom_1 .icon{ margin-left: 30px;}.border_one_bottom_1:hover #ico_comm.png:hover{ width: 9px; height: 9px;}.1{ float: left; border:1px solid black; margin-top: 10px; margin-right: 20px; text-align: center; font-family: "柳体","黑体"; padding-top: 10px; height: 30px; width: 150px;}该页面可能还存在很多不足，特别是命名有一定的不规范，但具体代码的实现出来的页面效果还是很好的。
阅读全文
0 0
- 第一次正式的网页制作
- 第一次网页制作
- 回忆第一次网页制作
- 第一次正式的笔试
- 第一次正式的笔试
- 第一次用ps制作网页
- 第一次正式面试，最终的选择？
- 算是正式的第一次开博客
- 第一次正式牵女孩子的手了
- 第一次课 定时器的制作
- Construct2 第一次制作的小游戏
- 网页制作的前景
- 网页圆角框的制作
- 制作网页的步骤
- 网页的制作
- 网页制作的开始
- 网页表格的制作
- 网页的制作---笔记
- http接口测试——Jmeter接口测试实例讲解
- linux基础命令
- dechex (dec_number)—把十进制数字dec_number转换为十六进制
- BlueZ5.45 D-Bus总线 GATT API 分析
- <jsp:include page=""/>和<%@include file=""%>-----JSP中两种页面引入方式的区别
- 第一次正式的网页制作
- 使用Aspera从EBI或NCBI下载基因组数据
- 建造者模式（builder模式）
- phpredis中文手册——《redis中文手册》 php版
- 十大Intellij IDEA快捷键
- 生成式对抗网络 NIPS 2016 课程 第 2 节
- 剖析ActivityManagerService源码，了解广播接收和发送机制
- jQuery选择器总结
- 二分查找法binarySearch
