学校网站建设项目背景,网页设计基础实训报告,电商网站介绍,贵德网站建设第 五 天 整个网站例 5.1 准备工作 项目目录与版心 base.css 5.2 网页制作思路 5.3 header 区域-整体布局 5.4 header区域-logo 5.5 header区域-导航 index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title学成在线/title!-- 顺序要求先清除再设置 --link relstylesheet href./css/base.csslink relstylesheet href./css/index.css
/head
body!-- 头部区域 --div classheaderdiv classwrapper!-- logo --div classlogoh1a href#学成在线/a/h1/div!-- 导航 --div classnavullia href# classactive首页/a/lilia href#课程/a/lilia href#职业/a/li/ul/div!-- 搜索 --div classsearchsearch/div!-- 用户 --div classuser用户/div/div/div
/body
/html
base.css
/* 基础公共样式清除默认样式 设置通用样式*/
* {margin: 0;padding: 0;box-sizing: border-box;
}li {list-style: none;
}body {font: 14px/1.5 Microsoft Yaher, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;color: #333;
}a {color: #333;text-decoration: none;
}
index.css
/* 首页样式 */
/* 版心 */
.wrapper {margin: 0 auto;width: 1200px;
}body {background-color: #f3f5f7;
}/* 头部区域 */
.header {height: 100px;background-color: #fff;
}.header .wrapper {padding-top: 29px;display: flex;
}/* logo */
.logo a {display: block;width: 195px;height: 41px;background-image: url(../images/logo.png);font-size: 0;
}/* 导航 */
.nav {margin-left: 102px;
}.nav ul {display: flex;
}.nav li {margin-right: 24px;
}.nav li a {display: block;padding: 6px 8px;line-height: 27px;font-size: 19px;
}/* active 类选器 表示默认选中的a */
.nav li .active,
.nav li a:hover{border-bottom: 2px solid #00a4ff;
} 5.6 header区域-搜索区域 5.7 header区域-用户区域 !-- 头部区域 --div classheaderdiv classwrapper!-- logo --div classlogoh1a href#学成在线/a/h1/div!-- 导航 --div classnavullia href# classactive首页/a/lilia href#课程/a/lilia href#职业/a/li/ul/div!-- 搜索 --div classsearchinput typetext placeholder请输入关键词a href#/a/div!-- 用户 --div classuserimg src./img/user.pngspan学员用户/span/div/div/divCSS
/* 导航 */
.nav {margin-left: 102px;
}.nav ul {display: flex;
}.nav li {margin-right: 24px;
}.nav li a {display: block;padding: 6px 8px;line-height: 27px;font-size: 19px;
}/* active 类选器 表示默认选中的a */
.nav li .active,
.nav li a:hover{border-bottom: 2px solid #00a4ff;
}.search {display: flex;margin-left: 64px;padding-left: 19px;padding-right: 12px;width: 412px;height: 40px;background-color: #f3f5f7;border-radius: 20px;
}.search input {flex: 1;border: 0;background-color: transparent;/* 去掉表单控件的焦点框 */outline: none;
}/* 父级是flex布局子级变弹性盒子加宽高生效 */
.search a {width: 16px;height: 16px;background-image: url(../img/search.png);align-self: center;
}/* 用户 */
.user {margin-left: 32px;margin-top: 4px;
}.user img {margin-right: 7px;/* vertical-align 行内块和行内垂直方向对方方式 */vertical-align: middle;
}.user span {font-size: 16px;color: #666;
}5.8 banner区域 index.css--banner
/* banner 区域 */
.banner {height: 420px;background-color: #0092cb;
}.banner .wrapper {display: flex;justify-content: space-between;height: 420px;background-image: url(../img/banner2.png);
}/* 侧导航 */
.banner .left {padding: 3px 20px;width: 191px;height: 420px;background-color: rgba(0, 0, 0, 0, 42);
}.banner .left a {/* */display: block;height: 46px;/* background-image: url(../img/); */line-height: 46px;font-size: 16px;color: #fff;
}.banner .left a:hover {background-image: url(../img/right-hover.png);color: #00a4ff;
}/* 课程表 */
.banner .right {margin-top: 60px;width: 218px;height: 305px;background-color: #209dd5;border-radius: 10px;
}.banner .right h3 {margin-left: 14px;height: 48px;line-height: 48px;font-size: 15px;color: #fff;font-weight: 400;
}.banner .right .content {padding: 14px;height: 257px;background-color: #fff;border-radius: 10px;
}.banner .right dl {margin-bottom: 12px;border-bottom: 1px solid #e0e0e0;
}.banner .right dt {margin-bottom: 8px;font-size: 14px;line-height: 20px;font-weight: 700;
}.banner .right dd {margin-bottom: 8px;font-size: 12px;line-height: 16px;
}.banner .right dd span {color: #00a4ff;
}.banner .right dd strong {color: #7d7d7d;font-weight: 400;
}.banner .right a {display: block;height: 32px;background-color: #00a4ff;text-align: center;font-size: 32xp;color: #fff;line-height: 32px;border-radius: 15px;
} !-- banner 区域 --div classbannerdiv classwrapperdiv classleftullia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/lilia href#前端开发/a/li/ul/divdiv classrighth3我的课程表/h3div classcontentdldt数据可视化课程/dtddspan正在学习/span-strongecharts使用步骤/strong/dd/dldldt数据可视化课程/dtddspan正在学习/span-strongecharts使用步骤/strong/dd/dldldt数据可视化课程/dtddspan正在学习/span-strongecharts使用步骤/strong/dd/dla href#全部课程/a/div/div/div/div
5.9 精品推荐区域 /* 精品推荐 */
.recommed {display: flex;margin-top: 11px;padding: 0 20px;height: 60px;background-color: #FFF;box-shadow: 0px 1px 2px 0px rgba(211, 211, 211, 0.5);line-height: 60px;
}
.recommed h3 {font-size: 18px;color: #00a4ff;font-weight: 400;
}.recommed ul {flex: 1;display: flex;
}.recommed ul li a {padding: 0 24px;border-right: 1px solid #e0e0e0;font-size: 18px;
}.recommed ul li:last-child a {border-right: 0;
}.recommed .modify {font-size: 16px;color: #00a4ff;
} !-- 精品推荐 --div classrecommed wrapperh3精品推荐/h3ullia href#Html/a/lilia href#Html/a/lilia href#Html/a/lilia href#Html/a/lilia href#Html/a/lilia href#Html/a/lilia href#Html/a/lilia href#Html/a/lilia href#Html/a/li/ula href# classmodify修改兴趣/a/div
5.10 推荐课程区域 5.11 前端开发工程师区域 5.12 版权区域
