使用html+css-实现静态开源案例-学成网
使用html+css实现-静态开源案例-学成网
- 基础开发须知
-
- 开发系列工具
- 开发流程
- CSS书写顺序
- 布局流程
- 页面制作
- 小tips
-
- html代码
- css样式
此静态页面在2k分辨率下显示最佳
1080p 正常显示但是元素可能相对大
2k以上无法正常显示 2k以下均可兼容
本文代码与原版的psd文件
链接：https://pan.baidu.com/s/17-iE0iKpQeZSSer4AUCtdQ
提取码：wnm0
基础开发须知
开发系列工具
PhotoShop CC2019 事先预览效果 作为蓝图
Sublime3 编辑器 写代码开发
Chrome 编译器 看效果做测试
开发流程
1.创建存放工程的文件夹
2.创建首页index.html 等系列页面文件夹
3.创建样式存放的文件夹
4.创建images来存放图片
5.未完待续
CSS书写顺序
1.布局定位属性
display/position/float/clear/visibility/overflow等等
2.自身属性
width/height/margin/padding/border/background等等
3.文本属性
color/font/text-decoration/text-align/vertical-align/white-space/break-word等等
4.其他属性(CSS3)
content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient等等
例如:
.jdc{
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0, 0, 0, 0.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
布局流程
1.必须确定页面的版心(可视区域的主要部分),测量得出
2.分析页面中的行模块，以及每个行模块中的列模块。
3.制作html结构。
4.通过DIV+CSS布局来控制页面整个模块
页面制作
版心作为固定存在的元素
可以写出固定样式 只要用到版心直接调用就可以了
.w{
width: 1200px;
margin: auto;
}
页面分析需要一行一行分析 不要分析一堆
小tips
本文样式主要通过
通过标准模式、浮动、定位 做完了整个页面 并且做了一些小细节方便后台接入
虽然是静态页面但是还是做了一些动态的样式
例如像一些按钮可变化 链接模块加入了阴影来让其有动态效果
代码风格按照企业标准来做的 但是有些小地方还是按照自己的想法写进去的(注释中有)
图片是psd中切出来的
html代码
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>学成在线-不是所有的人都能学会前端title>
<link rel="stylesheet" type="text/css" href="style.css">
head>
<body>
<div class="header w">
<div class="logo">
<img src="images/logo.png">
div>
<div class="nav">
<ul>
<li><a href="#">首页a>li>
<li><a href="#">课程a>li>
<li><a href="#">职业规划a>li>
ul>
div>
<div class="search clearfix">
<input type="text" name="text" value="输入关键词">
<button>button>
div>
<div class="user-login">
<a href="#">
<img src="images/user.png">
<span class="user-name">我爱你山河湖海span>
a>
div>
div>
<div class="banner">
<div class="banner-bg">
<div class="subnav">
<ul>
<li><a href="#">前端开发<span> > span>a>li>
<li><a href="#">后端开发<span> > span>a>li>
<li><a href="#">移动开发<span> > span>a>li>
<li><a href="#">人工智能<span> > span>a>li>
<li><a href="#">商业预测<span> > span>a>li>
<li><a href="#">云计算&大数据<span> > span>a>li>
<li><a href="#">运维&测试<span> > span>a>li>
<li><a href="#">UI设计<span> > span>a>li>
<li><a href="#">产品<span> > span>a>li>
ul>
div>
<div class="course">
<div class="course-title"><h2>我的课程表h2>div>
<div class="course-study">
<ul>
<li>
<a href="#" class="study-continue">继续学习 <h3>Java程序语言设计h3>a>
<a href="#" class="study-currently">正在学习-使用对象a>
li>
<li>
<a href="#" class="study-continue">继续学习 <h3>Java程序语言设计h3>a>
<a href="#" class="study-currently">正在学习-使用对象a>
li>
<li>
<a href="#" class="study-continue">继续学习 <h3>Java程序语言设计h3>a>
<a href="#" class="study-currently">正在学习-使用对象a>
li>
ul>
<a href="#" class="study-show-all">全部课程a>
div>
div>
div>
div>
<div class="goods">
<ul>
<li><a href="#" class="goods-recommendation"><h3>精品推荐h3>a>li>
<li><a href="#" class="goods-classification">JQuerya>li>
<li><a href="#" class="goods-classification">Sparka>li>
<li><a href="#" class="goods-classification">MySQLa>li>
<li><a href="#" class="goods-classification">JavaWeba>li>
<li><a href="#" class="goods-classification">Ajaxa>li>
<li><a href="#" class="goods-classification">Vuea>li>
ul>
<div class="goods-change">
<a href="#">修改兴趣a>
div>
div>
<div class="teach">
<div class="teach-nav">
<div class="teach-title"><h3>精品推荐h3>div>
<div class="teach-show-all"><a href="#">查看全部a>div>
div>
<div class="teach-body clearfix">
<ul>
<li><a href="#">
<img src="images/thinkphp5.0.jpg">
<h4>Think PHP 5.0 博客系统实战项目演练h4>
<div class="teach-body-show"><h5>高级h5><span>•span>1125人在学习div>
<img src="images/hot.png" class="tag">
a>li>
<li><a href="#">
<img src="images/Android.png">
<h4>Android 网络图片加载框架详解h4>
<div class="teach-body-show"><h5>高级h5><span>•span>1125人在学习div>
<img src="images/new.png" class="tag">
a>li>
<li><a href="#">
<img src="images/Angular2.png">
<h4>Angular 2 最新框架+主流技术+项目实战h4>
<div class="teach-body-show"><h5>高级h5><span>•span>1125人在学习div>
a>li>
<li><a href="#">
<img src="images/Hybrid.png">
<h4>Android Hybrid APP开发实战 H5+原生h4>
<div class="teach-body-show"><h5>高级h5><span>•span>1125人在学习div>
a>li>
<li><a href="#">
<img src="images/Hybrid.png">
<h4>Android Hybrid APP开发实战 H5+原生h4>
<div class="teach-body-show"><h5>高级h5><span>•span>1125人在学习div>
a>li>
<li><a href="#">
<img src="images/thinkphp5.0.jpg">
<h4>Think PHP 5.0 博客系统实战项目演练h4>
<div class="teach-body-show"><h5>高级h5><span>•span>1125人在学习div>
<img src="images/hot.png" class="tag">
a>li>
<li><a href="#">
<img src="images/Android.png">
<h4>Android 网络图片加载框架详解h4>
<div class="teach-body-show"><h5>高级h5><span>•span>1125人在学习div>
<img src="images/new.png" class="tag">
a>li>
<li><a href="#">
<img src="images/Angular2.png">
<h4>Angular 2 最新框架+主流技术+项目实战h4>
<div class="teach-body-show"><h5>高级h5><span>•span>1125人在学习div>
a>li>
<li><a href="#">
<img src="images/Hybrid.png">
<h4>Android Hybrid APP开发实战 H5+原生h4>
<div class="teach-body-show"><h5>高级h5><span>•span>1125人在学习div>
a>li>
<li><a href="#">
<img src="images/Hybrid.png">
<h4>Android Hybrid APP开发实战 H5+原生h4>
<div class="teach-body-show"><h5>高级h5><span>•span>1125人在学习div>
a>li>
ul>
div>
div>
<div class="footer">
<div class="footer-w">
<div class="footer-copyright">
<img src="images/f-logo.jpg">
<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程
<br>
© 2017年XTCG Inc.保留所有权利 -沪ICP备15025210号p>
<a href="#">下载APPa>
div>
<div class="footer-links">
<div class="f-about">
<h6>关于学成网h6>
<ul>
<li><a href="#">关于a>li>
<li><a href="#">管理团队a>li>
<li><a href="#">工作机会a>li>
<li><a href="#">客户服务a>li>
<li><a href="#">帮助a>li>
ul>
div>
<div class="f-tiro">
<h6>新手指南h6>
<ul>
<li><a href="#">如何注册a>li>
<li><a href="#">如何选课a>li>
<li><a href="#">如何拿到毕业证a>li>
<li><a href="#">学分是什么a>li>
<li><a href="#">考试未通过怎么办a>li>
ul>
div>
<div class="f-partner">
<h6>合作伙伴h6>
<ul>
<li><a href="#">合作机构a>li>
<li><a href="#">合作a>li>
ul>
div>
div>
div>
div>
<div class="webnav">
<ul>
<li><a href="#">编程入门a>li>
<li><a href="#">数据分析师a>li>
<li><a href="#">机器学习工程师a>li>
<li><a href="#">前端开发工程师a>li>
<li><a href="#">人工智能工程师a>li>
<li><a href="#">全栈工程师a>li>
<li><a href="#">iOS工程师a>li>
<li><a href="#">VR开发者a>li>
<li><a href="#">深度学习a>li>
<li><a href="#">商业预测分析师a>li>
<li><a href="#">Android开发工程师a>li>
ul>
div>
body>
html>
css样式
/* css初始化代码 css reset*/
/* 清除元素默认内外边距 */
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
button{
border: none;
}
body{
background-color: #f3f5f7;
}
/* 清除浮动 */
.clearfix:before,
.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
/* css初始化代码 stop */
/* 版心 宽度1200 水平居中 */
.w{
width: 1200px;
margin: auto;
}
/* header start */
.header{
height: 42px;
margin: 30px auto;
}
/* header stop */
/* 图标模块样式 */
.logo{
margin-right: 60px;
float: left;
}
/* 导航模块样式 */
.nav{
float: left;
}
.nav ul li{
float: left;
}
.nav ul li a{
display: block;
height: 40px;
line-height: 40px;
margin-right: 20px;
padding: 0 10px;
color: #050505;
text-decoration: none;
font-size: 18px;
}
/* 鼠标经过链接有底边框 */
.nav ul li a:hover{
border-bottom: 2px solid #00a4ff;
}
/* 搜索模块样式 */
.search{
float: left;
margin-left: 70px;
}
.search input{
float: left;
padding-left: 20px;
width: 340px;
height: 40px;
border: 1px solid #00a4ff;
color: #bfbfbf;
outline: none;
}
.search button{
float: left;
width: 50px;
height: 42px;
background: url('images/search.png');
cursor: pointer;
outline: none;
}
/* 用户登陆模块样式 */
.user-login{
float: left;
margin-left: 30px;
margin-top: 6px;
}
/*登陆模块按理来说用户得查看信息 所以要设置链接 */
.user-login a{
text-decoration: none;
font-size: 12px;
color: #666;
}
.user-login a:hover{
color: #00b4ff;
}
/* 控制用户名和头像居中 */
.user-login a .user-name{
display: inline-block;
margin-top: 6px;
margin-left: 5px;
vertical-align: top;
}
/* banner广告轮播图 */
.banner{
height: 420px;
background-color: #1c036c ;
}
/* 轮播图背景 因为只有一张所以就弄一个 */
.banner-bg{
display: block;
margin: 0 auto;
width: 1200px;
height: 420px;
background: url('images/banner.png') no-repeat;
background-position: center 0;
}
/* 侧导航栏subnav */
.subnav{
float: left;
padding: 7px 20px 0;
width: 150px;
height: 413px;
background-color: rgba(19, 1, 75, 0.5);
}
.subnav ul li{
height: 45px;
line-height: 45px;
}
.subnav ul li a{
color: #FFF;
text-decoration: none;
font-size: 14px;
}
.subnav ul li a:hover{
color: #00b4ff;
}
.subnav ul li span{
float: right;
}
/* 右侧对齐course 课程表 */
.course{
float: right;
margin-top: 50px;
width: 228px;
height: 300px;
background-color: #fff;
}
/* 课程表标题 */
.course-title{
height: 48px;
background-color: #9bceea;
}
/* 课程表标题文字 */
.course-title h2{
height: 48px;
line-height: 48px;
text-align: center;
color: #FFF;
font-size: 18px;
}
/* 课程表用户学习的内容 */
.course-study{
padding: 8px 14px 0;
}
.course-study ul li{
margin-top: 12px;
height: 50px;
border-bottom: 2px solid #efefef;
}
.course-study ul li a{
text-decoration: none;
}
.course-study ul li a:hover{
color: #00b4ff;
}
/* 继续学习链接 */
.study-continue{
color: #4e4e4e;
font-size: 16px;
}
/* 用户学习内容标题 */
.course-study ul li h3{
display: inline;
color: #4e4e4e;
font-size: 14px;
}
/* 用户当前学习内容课程名 */
.study-currently{
color: #a5a5a5;
font-size: 12px;
}
/* 全部课程跳转链接 */
.study-show-all{
display: block;
margin-top: 5px;
width: 198px;
height: 40px;
line-height: 40px;
text-align: center;
color: #00a4ff;
font-size: 16px;
text-decoration: none;
border: 1px solid #00a4ff;
}
.study-show-all:hover{
background-color: #00a4ff;
color: #FFF;
}
/* 精品推荐课程导航 注意整个导航的背景有阴影 */
.goods{
margin: 8px auto;
width: 1200px;
height: 60px;
line-height: 60px;
background-color: #fff;
box-shadow: 2px 2px 2px rgba(220, 222, 224, 0.5);
}
/* 控制前面处修改兴趣之外的所有链接样式 */
.goods ul li{
float: left;
}
.goods ul li a{
color: #050505;
text-decoration: none;
}
.goods ul li a:hover{
color: #00a4ff;
}
/* 单独控制精品课程 */
.goods-recommendation h3{
padding: 0 30px;
font-size: 16px;
}
/* 控制按类目划分的课程展示导航 */
.goods-classification{
padding: 0 30px;
border-left: 1px solid #bfbfbf;
}
/* 修改兴趣改变推荐 */
.goods-change{
float: right;
margin-right: 26px;
}
.goods-change a{
font-size: 14px;
color: #00a4ff;
text-decoration: none;
}
/* 课程推荐展示课程页面开始 teach 按理来说此盒子不用给高度 让其中内容自动撑开就可以了*/
.teach{
margin: 35px auto 0;
width: 1200px;
}
/* 展示具体课程的导航栏 需要宽度 因为这几个内容是固定的 */
.teach-nav{
height: 40px;
}
.teach-title{
float: left;
font-size: 20px;
color: #494949;
}
.teach-title h3{
font-weight: normal;
}
.teach-show-all{
float: right;
margin-right: 30px;
line-height: 40px;
}
.teach-show-all a{
font-size: 12px;
color: #a5a5a5;
text-decoration: none;
}
/* 课程可能不固定 一行存放五个课程 我可以两行 也可以一行 所以不要高度
目前解决浮动会造成溢出的办法只有 例如下面出现的 所有li想要一行显示5个
需要1215px的宽度 所以我们可以直接给1215px的宽度让他能存放的了这些元素
(这是没有办法的办法 先这么凑合用)
*/
.teach-body{
width: 1215px;
}
.teach-body ul li{
/* 设定相对定位 使孩子hot能够很好的调整位置 */
position: relative;
float: left;
width: 228px;
height: 270px;
margin: 0 15px 15px 0;
background-color: #FFF;
}
/* 在课程上定位的 热门以及最新的小表情 */
.teach-body ul li .tag{
position: absolute;
top: 2%;
right: 0;
margin-right: -4px;
width: 40px;
height: 24px;
}
/* 给链接标签设定宽度高度 与li相同 实现存放内容 以及鼠标移动后出现阴影的效果 */
.teach-body ul li a{
display: block;
width: 228px;
height: 270px;
text-decoration: none;
}
.teach-body ul li a:hover{
box-shadow: 0 2px 2px 1px rgba(220, 222, 224, 0.9);
}
/* 原尺寸图片多了一部分 设定宽度让那部分消失 */
.teach-body img{
width: 228px;
}
/* 介绍课程的标题用h4 */
.teach-body ul li a h4{
margin: 25px 20px 0 24px;
font-weight: normal;
color: #050505;
font-size: 14px;
}
/* 控制下方突出课程内容 设定了盒子存放 控制整体的文字颜色 */
.teach-body ul li a .teach-body-show{
margin: 20px 0 0 24px;
color: #999999;
font-size: 12px;
}
/* 对于标注课程级别的 设定了h5来显示 */
.teach-body ul li a h5{
float: left;
color: #ff7c2d;
font-weight: normal;
font-size: 12px;
}
/* 控制圆点位置 (没有办法的办法 以后有其他方式解决) */
.teach-body ul li a span{
margin: 0 8px;
}
.test{
width: 1300px;
height: 400px;
background-color: #000;
}
/* 底部功能菜单 */
.footer{
margin: 25px auto 0;
height: 300px;
background-color: #fff;
}
/* 内容存放容器 */
.footer-w{
margin: 0 auto;
width: 1200px;
height: 267px;
padding-top: 33px;
padding-right: 25px;
}
/* 企业信息展示 */
.footer-w .footer-copyright{
float: left;
margin-left: 20px;
}
.footer-copyright p{
margin-top: 25px;
font-size: 12px;
color: #666666;
}
.footer-copyright a{
display: block;
margin-top: 16px;
width: 118px;
height: 34px;
line-height: 34px;
text-align: center;
text-decoration: none;
font-size: 16px;
color: #00a4ff;
border: 1px solid #00a4ff;
}
/* 友情链接 */
.footer-links{
margin-left: 200px;
float: left;
}
/* 所有链接的题目 */
.footer-links h6{
color: #333333;
font-size: 16px;
font-weight: normal;
margin-bottom: 15px;
}
/* 所有链接 */
.footer-links a{
color: #333333;
font-size: 12px;
text-decoration: none;
}
.footer-links a:hover{
color: #00a4ff;
}
/* 关于我们容器 */
.footer-links .f-about{
float: left;
}
/* 新手教程容器 */
.footer-links .f-tiro{
float: left;
margin-left: 145px;
}
/* 友商容器 */
.footer-links .f-partner{
float: left;
margin-left: 145px;
}
/* 侧面固定快速导航栏
左侧计算的算法是 先走整个页面的50%
left:50%;
然后走版心的一半也就是600px
margin-left:-600px;
然后再计算存放容器的宽度也就是185px
总和:margin-left:-785px;
此时这个容器就会贴着版心
然后再加上你想要的距离 就可以解决缩放问题
*/
.webnav{
position: fixed;
display: block;
top: 200px;
left: 50%;
margin-left: -800px;
width: 135px;
height: 400px;
background-color: #fff;
padding: 25px 25px 0;
z-index: 9999;
}
.webnav ul li{
height: 14px;
line-height: 14px;
margin-bottom: 20px;
}
.webnav ul li a{
font-size: 14px;
color: #000;
text-decoration: none;
}
.webnav ul li a:hover{
color: #00a4ff;
}