🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码:【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码: 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师,技术组长,教学总监;曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰,难凉热血;多年过去,历经变迁,物是人非。 然而,对于技术的探索和追求从未停歇。 💪坚持原创,热衷分享,初心未改,继往开来!
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。
🏷️HTML静态网页设计作业使用dreamweaver制作,采用DIV+CSS布局,共有多个页面,首页使用CSS排版比较丰富,色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度,主体内容区域宽度
🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)
📔网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。
📘网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。
📒网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;
📙网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++
等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)📜html文件包含:其中index.html是首页、其他html为二级页面;
(2)📑 css文件包含:css全部页面样式,文字滚动, 图片放大等;
(3)📄 js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>客户案例title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
head>
<body>
<div class="top">
<a href="index.html"><img class="floatl" style="float:left" src="images/logo.jpg" />a>
div>
<div class="daohang">
<div id="nav">
<ul>
<li><a href="index.html">首页a>li>
<li><a href="about.html">关于我们a>li>
<li><a href="xiangmu.html">设计项目a>li>
<li><a href="anli.html">客户案例a>li>
<li><a href="zixun.html">新闻资讯a>li>
<li><a href="women.html">联系我们a>li>
<li><a href="jianjie.html">个人简介a>li>
ul>
div>
div>
<div class="main1">
<div class="left">
<div class="title"><a href="zixun.html"><h1>新闻资讯h1>a>div>
<div class="left-box">
<ul>
<li><h2>青春心向党 建功新时代 h2>li>
<li><h2>青春心向党 建功新时代 h2>li>
<li><h2>青春心向党 建功新时代 h2>li>
<li><h2>青春心向党 建功新时代 h2>li>
<li><h2>青春心向党 建功新时代 h2>li>
<li><h2>青春心向党 建功新时代 h2>li>
<li><h2>青春心向党 建功新时代 h2>li>
<li><h2>青春心向党 建功新时代 h2>li>
<li><h2>青春心向党 建功新时代 h2>li>
<li><h2>青春心向党 建功新时代 h2>li>
<li><h2>青春心向党 建功新时代 h2>li>
ul>
div>
div>
<div class="right">
<div class=" luj"><a href="index.html">首页a>><a href="anli.html">客户案例a>>订购服务的网站页面设计div>
<div class="title">订购服务的网站页面设计 div>
<img src="images/anlixq02.jpg" />
<P> 对于出门旅行,绝大多数的用户都抱有着不小的期待。但是旅行本身并不轻松,需要订购酒店,需要购买机票和车票,租车,购买门票,同时旅行还意味着非常大量的活动。而这次的概念设计,就是围绕着预订服务来展开的。同样使用了3D建模来构建视觉,诸多和日常出行相关的视觉元素占据了左侧的页面,而右侧则是预订需要填写的表单内容。整个页面采用了更加富有活力的配色,降低用户填写表单时候的紧张情绪,清晰直观的页面布局,让用户无需四处摸索,可以直接开始交互。从标题到表单的条目都保有良好的对比度,可以快速扫视阅读,便于用户填写。P>
<P> 向下滚动,用户可以了解这项服务的相关优势,特殊的功能,相关福利,以及更多的信息。每个信息都紧密围绕着一个主题来予以阐述,视觉化的元素被设计得非常吸睛,同时,和整体在风格调性上也保持着高度的一致。P>
<p> 形体和色彩,到底哪个在设计中更加富有表现力?这个问题可能没有一个固定答案,这场在战争在设计领域当中已经持续多年,甚至会一直持续下去。这个设计项目是为一个室内设计工作室来设计官方网站,他们的主要业务是制作可视化的室内设计渲染图。他们熟知如何最大限度地借助设计工具来呈现室内设计的效果,在接到需求之后,我们决定使用全屏背景结合他们最擅长的3D建模,来展现高质量的室内设计能力和建模渲染效果。P>
div>
div>
div>
<div class="bottom">
<div class="bottom-box">
<p>2016-2019 @ 版权所有 视觉传达1601班 p>
div>
div>
body>
html>
@charset "utf-8";
/* CSS Document */
body{ margin:0 auto; font-size:12px; font-family: "微软雅黑",arial; line-height:22px; }
div,p,ul,li,p,h1,h2,h3{ height:auto; margin:0;; padding:0; vertical-align:middle ;list-style:none;}
a{ text-decoration:none;color:#333;}
img{ border:0; margin:0; padding:0;}
/*---网页开始-----*/
/*---top开始-----*/
.top{ height:200px; width:1024px; margin:0 auto; }
.ban{ height: 335px;
width: 1024px;
margin: 0 auto;}
/*---top结束-----*/
/*---导航----*/
.daohang{width:1024px;
height: 47px;
background: url(../images/nav-bj.jpg);
margin: 0 auto;}
#nav{ width:1024px; height:47px; line-height:47px; font-weight:bolder; font-size:14px; margin:0 auto; }
#nav ul{ margin:0 auto; }
#nav li{float: left;
width: 140px;
text-align: center;
color: #FFF;
}
#nav a{width:140px;height:47px; display:block; font-size:14px; font-weight:bold; float:left;}
#nav a:link { color:#FFF; }
#nav a:visited{ color:#FFF; overflow:hidden; }
#nav a:hover { color: #FFF; overflow:hidden; background:#224200; }
#nav a:active { color: #FFF; overflow:hidden; background:#224200; }
/*---------main开始-----------------*/
.main1{ width:1022px; margin:0 auto; margin-top:10px;}
.main{ width:1022px; margin:0 auto; margin-top:10px;border: #333 1px solid;}
.box{ height:320px;
width: 1024px;
margin: 0 auto;
margin-bottom:10px;}
.inner{
width: 1024px;
height: 320px;
position: relative;
overflow: hidden;
}
.inner img{
width:1024px;
height: 320px;
vertical-align: top
}
.inner ul {
width: 1000%;
position: absolute;
list-style: none;
left:0;
top: 0;
}
.inner li{
float: left;
}
ol {
position: absolute;
height: 20px;
right: 20px;
bottom: 12px;
text-align: center;
padding: 5px;
}
ol li{
display: block;
width: 20px;
height: 20px;
line-height: 20px;
background-color: #fff;
margin: 5px;
cursor: pointer;
}
ol .current{
background-color: red;
}
#arr{
display: block;
}
#arr span{
width: 30px;
height: 40px;
position: absolute;
left: 14px;
top: 156px;
margin-top: -20px;
background: #fff;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #000;
opacity: 0.5;
border: 1px solid #fff;
}
#arr #right {
right: 18px;
left: auto;
}
.box1{ width:1024px; height:311px; margin:0 auto;}
.shang-left{float: left;
width: 320px;}
.gk-title{ width:320px; height:40px; background:#0b6d47; }
.gk-title h1{ height: 40px;
line-height: 40px;
width: 130px;
margin-left: 20px;
font-size: 16px;
color: #FFF;
font-family: "黑体"; }
.gk{ width: 308px;height:262px; border-left:#8c8c8c 1px solid; border-right:#8c8c8c 1px solid; border-bottom:#8c8c8c 1px solid; background:#FFF; padding:0px 5px;padding-top: 10px; }
.gk span{ color:#F00;}
.gk img{ margin-right:10px; float:left;}
.xz{ width:347px; height:311px; padding-left:5px; margin:0px 15px;border:#8c8c8c 1px solid; background:#FFF; float:left; overflow:hidden;}
.xz h1{height:35px; line-height:35px; font-size:14px; color:#333; font-family:"黑体"; }
.xz span{font-size:12px; color:#333; color:#408602; font-family: "Courier New", Courier, monospace}
.xz img{ width:160px; height:120px; margin:5px; float:left;}
.shang-right{float:left;}
.count-title{ width:320px; height:40px; background: #0b6d47; }
.count-title h1{ height: 40px;
line-height: 40px;
width: 130px;
margin-left: 20px;
font-size: 16px;
color: #FFF;
font-family: "黑体"; }
.count{width: 298px;
height: 252px;
border-left: #8c8c8c 1px solid;
border-right: #8c8c8c 1px solid;
border-bottom: #8c8c8c 1px solid;
background: #FFF;
padding: 10px;}
.count img{ margin:10px 0px 10px 20px;}
.count p{line-height: 30px;
font-size: 14px;
height: 30px;}
.count span{ color:#408602; font-size:16px; font-family:"黑体";}
.yy-title{ width:1024px; height: 40px;
background: #0b6d47;}
.yy-title h1{ height: 40px;
line-height: 40px;
width: 130px;
margin-left: 20px;
font-size: 16px;
color: #FFF;
font-family: "黑体"; }
.floatl{ float: left;}
.yy{ width: 978px;
padding:10px;
height: 190px;
border-left: #6c6b6b 1px solid;
border-right: #6c6b6b 1px solid;
border-bottom: #6c6b6b 1px solid;
background: #FFF; }
.meishi{ margin-top:15px !important; margin-bottom:15px; }
.ms{ width: 1002px;
padding:10px;
height: 190px;
border-left: #6c6b6b 1px solid;
border-right: #6c6b6b 1px solid;
border-bottom: #6c6b6b 1px solid;
background: #FFF; }
.ms ul{}
.ms ul li{ width:185px; height:180px; margin:5px; float:left;}
.ms ul li img{ width:185px; height:150px;}
.ms ul li p{ text-align:center; font-size:14px;}
.righttitle{width: 935px; background:url(../images/er_02.png) no-repeat; height:68px; line-height:68px; padding-left:65px; color:#3e8100; font-size:18px; font-weight:bold;}
.righttitle span{ font-size:14px; color:#a5a5a5; font-family:"arial"; font-weight:normal;}
.erfenlei{ width:155px;}
.erfenlei ul li{ width:155px;line-height:34px; font-size:14px; font-weight:bold; color:#fff;}
.erfenlei ul li a{ display:block; background:url(../images/erfenlei.png) no-repeat; width:140px; padding-left:15px;height:34px; line-height:34px; font-size:14px; font-weight:bold; color:#fff;}
.erfenlei ul li a:hover{ color:#ffff0; background:url(../images/erfenlei1.jpg) no-repeat;}
.erfenlei ul li ul{ margin-bottom:10px; _margin-bottom:5px; border-bottom:1px #326421 solid;}
.erfenlei ul li ul li{ padding-left:30px; font-size:12px; color:#fff; line-height:25px; font-weight:normal; height:25px;}
.erfenlei ul li ul li a{ background:url(../images/dian.jpg) left center no-repeat;font-size:12px; display:block;height:25px; color:#fff; line-height:25px; font-weight:normal;}
.erfenlei ul li ul li a:hover{background:url(../images/dian.jpg) left center no-repeat;font-size:12px; color:#fff; line-height:25px; font-weight:normal;}
.ncontu {
line-height: 22px;
padding: 0px 12px;
color: #464646;
height: 470px;
width: 1000px;
}
.ncontu ul {
}
.ncontu ul li {
width: 250px; display:block; float: left; height: 220px; overflow:hidden;margin-bottom: 15px;
}
.ncontu ul li img{ width:230px; height:186px;}
.ncontu ul li a {
border-bottom: #907f6f 1px solid; border-left: #907f6f 1px solid; padding-bottom: 4px; padding-left: 4px; width:230px; padding-right: 4px; display: block; background: #ffffff; float: left; height: 188px; border-top: #907f6f 1px solid; border-right: #907f6f 1px solid; padding-top: 4px
}
.ncontu ul li a:hover {
border-bottom: #cc0000 1px solid; border-left: #cc0000 1px solid; border-top: #cc0000 1px solid; border-right: #cc0000 1px solid
}
.ncontu ul li a.pro3 {
border-bottom: #907f6f 0px solid; text-aLIGN: center; border-left: #907f6f 0px solid; line-height: 20px; width: 211px; display: block; background: none transparent scroll repeat 0% 0%; float: left; height: 20px; color: #464646; border-top: #907f6f 0px solid; border-right: #907f6f 0px solid; text-decoration:none
}
.ncontu ul li a.pro3:hover {
border-bottom: #907f6f 0px solid; border-left: #907f6f 0px solid; color: #ff9900; border-top: #907f6f 0px solid; border-right: #907f6f 0px solid
}
.yema{ width:690px; height:30px; margin-top:20px; text-align:center;}
.news{ width: 983px;
padding: 0px 20px;
margin-bottom: 30px; }
.news ul li{ line-height:30px; height:30px; background:url(../images/fenge.jpg) bottom repeat-x; color:#3d2915;}
.news ul li a{ float:left; display:block; line-height:30px; height:30px; background:url(../images/lvdian.jpg) left center no-repeat; color:#3d2915; padding-left:20px; }
.news ul li a:hover{ color:#000;}
.news ul li span{ float:right; color:#666; line-height:30px;}
.danye{ color:#666; font-size:14px; line-height:25px;}
.danye b{ font-size:18px; display:block; text-align:center;}
.danye img{ margin:0 auto; display:block;}
.biaoti{ color:#3d2915; font-weight:bold; font-size:16px; line-height:40px; background:url(../images/fenge.jpg) bottom repeat-x; text-align:center; margin-bottom:10px; _margin-bottom:10px;}
.neirong{ padding:0px 15px 15px 15px;}
.neirong img{ margin:0 auto;display: block; margin-top:20px; margin-bottom:20px;}
.xm{ width: 840px; height:200px; margin: 0 auto; margin-top: 30px; margin-bottom: 20px;}
.xm img {width: 428px; height: 200px; float: left;}
.xm .xm-right{ width: 375px;
height: 168px;
padding-left: 35px;
padding-top: 30px;
float: left;
border: #cfcdcd 1px solid; border-left:none;}
.xm .xm-right h1{ font-size: 16px;}
.xm .xm-right p{ color: #787676; font-size: 14px; line-height: 30px;}
.lianxi{ width:600px; margin:0 auto; text-align:center; font-size:16px; line-height:30px;}
.bx1{
height: 220px;
padding: 20px;
margin-bottom: 20px;
}
.bx1 img {width: 300px;
height: 160px;
float: left;
margin-top: 20px;
margin-right: 20px;}
.bx1 h1{ font-size: 16px; height: 40px; line-height: 40px; padding-left: 10px; background:#75b980;}
.bx1 p{ color: #787676; font-size: 14px; line-height: 30px; text-indent: 2em;}
.left {
width: 279px;
height: 615px;
float: left;
margin-right: 15px;
overflow: hidden;
}
.left .title {
width: 279px;
height: 45px;
background: #046a43;
}
.left .title h1 {
height: 46px;
line-height: 46px;
font-size: 14px;
font-family: "宋体";
color: #FFF;
padding-left: 10px;
float: left;
}
.left .left-box {
width: 279px;
height: 323px;
margin-bottom: 10px;
background: #f8f8f8;
padding: 20px 0px;
}
.left .left-box ul {
padding: 0px;
margin: 0px;
}
.left .left-box ul li {
width: 249px;
height: 30px;
float: left;
border-bottom: none;
padding: 0px 15px;
}
.left .left-box ul li h2 {
height: 30px;
line-height: 20px;
font-size: 14px;
font-weight: lighter;
}
.right {
width: 678px;
padding: 25px;
float: left;
background: #f8f8f8;
overflow: hidden;
text-align:center;
}
.right .luj{ height:30px; text-align:right; font-size:14px;}
.right .title {
width: 100%;
color: #141414;
font-size: 30px;
line-height: 50px;
text-align: center;
}
.right img{ margin:20px 0px;}
.right p {
text-align: left;
text-indent:2em;
}
/*---bottom结束-----*/
.bottom{ width: 1024px;
margin: 0 auto;margin-top: 20px; }
.bottom img{float:left;}
.bottom p{ width:100%; height:30px; font-size:14px; text-align:center; font-weight:bold; margin-left:20px; float:left;}
/*---bottom结束-----*/
第一、带着目标去学习,无论看书报课还是各种线下活动。
首先要明确自己的学习目标是什么,是想解决什么问题,实现怎样的目标。
第二、学习要建立个人知识体系
知识是学不完的,书籍是浩如烟海的。我们尽情徜徉其中的时候,千万不要被海水淹死,没有自我了。在学习过程中,我们会发现每一个知识点都是有她的边界和背景的,我们要善于归纳整理知识
第三、学到了就要用到
有时,我们一天下来感觉学到了很多干货,那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事,但只有会学习的人,才有价值。
1.如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “👍点赞” “✍️评论” “💙收藏”
一键三连哦!
2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】
带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!
3.