发表于： 2022-10-24 20:56:59
0 423
今天优化了部分代码：
css代码：
* {
margin: 0;
padding: 0;
}
.box {
width: 100%;
margin: 0 auto;
background-color: #fafafa;
}
li {
list-style: none;
}
.icon {
float: right;
width: 50px;
padding: 0 10px;
margin-top: -20px;
}
.head {
height: 39px;
width: auto;
background-color: white;
}
.head p {
font-size: 14px;
color: #29b078;
margin: 10px 0 0 200px;
}
.chart {
width: auto;
margin-right: 15%;
}
.cooperation {
width: 100%;
background-color: #fafafa;
}
.navigation {
background-color: #29b078;
width: 100%;
display: inline-block;
height: 300px;
}
.navigation img {
margin-left: 200px;
margin-top: 30px;
display: inline-block;
}
datalist {
display: inline-block;
}
summary {
position: relative;
cursor: pointer;
list-style: none;
width: 4rem;
height: 2.8rem;
/*background: red;*/
display: inline-block;
float: right;
}
span {
position: absolute;
display: block;
width: 4rem;
height: 0.6rem;
background-color: #333333;
transition: 0.3s;
}
span:first-child {
top: 0;
}
span:nth-child(2) {
top: calc(50% - 0.3rem);
}
span:last-child {
bottom: 0;
}
details[open] span:nth-child(2) {
display: none;
}
details[open] span:first-child {
top: calc(50% - 0.3rem);
transform: rotate(-45deg);
transform-origin: center;
}
details[open] span:last-child {
top: calc(50% - 0.3rem);
transform: rotate(45deg);
transform-origin: center;
}
nav {
position: absolute;
left: 0;
top: 174px;
width: 100%;
height: 0;
background-color: #29b078;
overflow: hidden;
/*z-index: 1;*/
}
details[open] +nav {
height: calc(200px - 5%);
z-index: 1;
}
nav ul {
list-style: none;
/*padding: 0 1rem;*/
text-align: center;
padding: 0;
}
nav li {
font-size: 20px;
/*border-bottom: 1px solid #999999;*/
color: #fff;
}
/*nav li:last-child {*/
/* margin-top: 1rem;*/
/* padding-block: 0.5rem;*/
/* border-radius: 10px;*/
/*}*/
/*.dropdown {*/
/* float: right;*/
/*}*/
.a {
text-align: center;
line-height: 60px;
display: block;
}
/*#home {*/
/* text-align: center;*/
/* width: 100%;*/
/*}*/
/*a{*/
/* text-decoration: none;*/
/* width: 100%;*/
/* height: 40px;*/
/* line-height: 40px;*/
/* font-size: 20px;*/
/* color: #ffffff;*/
/* display: inline-block;*/
/* !*border-bottom: ridge 10px #29b078;*!*/
/* border-style: none;*/
/*}*/
/*.wrap {*/
/* float: right;*/
/* padding: 0;*/
/* margin: 0 auto;*/
/* background: #29b078;*/
/*}*/
/*.wrap ul{*/
/* display: none;*/
/* height: 120px;*/
/* background: #29b078;*/
/* color: white;*/
/*}*/
/*.wrap>li{*/
/* width: 300px;*/
/* background: #29b078;*/
/* text-align: center;*/
/* overflow: hidden;*/
/*}*/
/*ul:target{*/
/* display: block;*/
/*}*/
/*ul:checked{*/
/* max-height: 0;*/
/* transform: translate(1.1);*/
/*}*/
/*.a ul li {*/
/* display: block;*/
/* width: 15%;*/
/* font-size: 20px;*/
/* float: left;*/
/* color: #fff;*/
/* text-decoration: none;*/
/*}*/
/*!* 下拉按钮样式 *!*/
/*.dropbtn {*/
/* background-color: #29b078;*/
/* color: white;*/
/* padding: 16px;*/
/* font-size: 16px;*/
/* border: none;*/
/* cursor: pointer;*/
/*}*/
/*!* 容器 <div> - 需要定位下拉内容 *!*/
/*.dropdown {*/
/* position: relative;*/
/* display: inline-block;*/
/*}*/
/*!* 下拉内容 (默认隐藏) *!*/
/*.dropdown-content {*/
/* display: none;*/
/* position: absolute;*/
/* background-color: #29b078;*/
/* min-width: 160px;*/
/* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
/* z-index: 1;*/
/*}*/
/*!* 下拉菜单的链接 *!*/
/*.dropdown-content li a {*/
/* color: #fff;*/
/* padding: 12px 16px;*/
/* text-decoration: none;*/
/* display: block;*/
/*}*/
/*li a:hover {*/
/* background-color: #29b078;*/
/* color: white;*/
/* text-decoration: none;*/
/*}*/
/*!* 鼠标移上去后修改下拉菜单链接颜色 *!*/
/*.dropdown-content a:hover {background-color: #29b078}*/
/*!* 在鼠标移上去后显示下拉菜单 *!*/
/*.dropdown:hover .dropdown-content {*/
/* display: block;*/
/*}*/
/*!* 当下拉内容显示后修改下拉按钮的背景颜色 *!*/
/*.dropdown:hover .dropbtn {*/
/* background-color: #29b078;*/
/*}*/
/*.dropdown-content li {*/
/* display: block;*/
/* !*width: 15%;*!*/
/* !*font-size: 20px;*!*/
/* !*float: left;*!*/
/* !*color: #fff;*!*/
/* !*text-decoration: none;*!*/
/* !*position: relative;*!*/
/* !*text-decoration: none;*!*/
/*}*/
li a {
color: #fff;
text-decoration: none;
}
.browse {
width: 100%;
height: auto;
position: relative;
}
.image {
max-height: 100%;
max-width: 100%;
width: 100%;
z-index: 0;
}
.content {
width: 100%;
}
.b {
width: 100%;
margin-top: 50px;
display: inline-block;
}
.b h5 {
font-size: 15px;
}
.b a {
font-size: 15px;
color: #29b078;
text-decoration: none;
}
.list {
width: 100%;
background-color: #fff;
}
.list p {
font-size: 20px;
color: #333333;
text-align: center;
padding: 20px 0;
border-bottom-style: solid;
border-color: #e6e6e6;
font-weight: bolder;
}
.p {
list-style-type: circle;
}
.list ul li {
font-size: 17px;
color: #f9a372;
margin-top: 30px;
margin-left: 150px;
}
.d{
color: #53bb8c;
}
.c {
color: #f9a372;
}
.introduce {
width: 100%;
background-color: #fff;
display: flex;
}
.introduce p {
color: #b5b5b5;
font-size: 15px;
margin: 40px 40px
}
.introduce img {
width: auto;
height: auto;
margin: 5%;
}
.low {
width: 100%;
background-color: #26a26f;
display: block;
}
.public1 {
display: block;
margin-left: 30%;
margin-top: 10%;
}
.public2 {
display: block;
margin-top: 8%;
}
.public4 {
display: flex;
margin-top: 2%;
}
.public3 {
float: right;
display: block;
margin-top: 5%;
}
.public3 p {
color: #ffffff;
margin-bottom: 0;
margin-top: 15px;
margin-right: 20px;
}
.col-lg-4 p {
color: #ffffff;
margin-bottom: 0;
margin-top: 15px;
margin-right: 20px;
}
.public img {
padding-top: 5%;
padding-left: 5%;
}
.row {
--bs-gutter-x: 0;
}
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=720,initial-scale=1">
<link rel="stylesheet" href="cooperation.css">
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<div class="box">
<div class="head ">
<p>客服热线:010-594-78634</p>
<div class="chart">
<img class="icon" src="tupian/图层%201.png">
<img class="icon" src="tupian/图层%202.png">
<img class="icon" src="tupian/图层%203.png">
</div>
</div>
<div class="navigation">
<!-- <div class="row">-->
<!-- <div class="col-lg-6 col-md-6 col-sm-6">-->
<img src="tupian/技能树.png">
<!-- </div>-->
<!-- <div class="col-lg-6 col-md-6 col-sm-6">-->
<details>
<summary data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<span></span>
<span></span>
<span></span>
</summary>
</details>
<nav>
<ul>
<li>首页</li>
<li>职业</li>
<li>推荐</li>
<li>关于</li>
</ul>
</nav>
<!-- <ul class="wrap">-->
<!-- <li>-->
<!-- <a href="#home">导航</a>-->
<!-- <ul id="home">-->
<!-- <li>首页</li>-->
<!-- <li>职业</li>-->
<!-- <li>推荐</li>-->
<!-- <li>关于</li>-->
<!-- </ul>-->
<!-- </li>-->
<!-- </ul>-->
<!-- -->
<!-- -->
<!-- -->
<!-- <ul class="wrap">-->
<!-- <li>-->
<!-- <a href="#res">导航</a>-->
<!-- <ul id="res">-->
<!-- <li>首页</li>-->
<!-- <li>职业</li>-->
<!-- <li>推荐</li>-->
<!-- <li>关于</li>-->
<!-- </ul>-->
<!-- </li>-->
<!-- </ul>-->
<!-- <div class="" style="float:right;margin-right: 100px ">-->
<!-- <button class="" href="#">导航</button>-->
<!-- <ul class="" href="#">-->
<!-- <li><a href="#">首页</a></li>-->
<!-- <li><a href="#">职业</a></li>-->
<!-- <li><a href="#">推荐</a></li>-->
<!-- <li><a href="#">关于</a></li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- <div class="dropdown">-->
<!-- <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">-->
<!-- Dropdown button-->
<!-- </button>-->
<!-- <div class="dropdown-menu">-->
<!-- <a class="dropdown-item" href="#">首页</a>-->
<!-- <a class="dropdown-item" href="#">职业</a>-->
<!-- <a class="dropdown-item" href="#">推荐</a>-->
<!-- <a class="dropdown-item" href="#">关于</a>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</div>
<div class="browse ">
<img class="image" src="tupian/背景%201.png" alt="">
</div>
<div class="container">
<div class="content">
<div class="b">
<h5>首页><a href="#">合作企业</a></h5>
</div>
<div class="row">
<div class=" col-lg-4">
<div class="list">
<p>合作企业</p>
<ul>
<li class="p"><a class="d"href="#">阿里巴巴</a></li>
<li class="p"><a class="d"href="#">腾讯视频</a></li>
<li class="p" style="list-style-type: disc; font-size: 20px;"><a class="c" href="#">土豆网</a></li>
<li class="p"><a class="d"href="#">北京葡萄藤</a></li>
<li class="p"><a class="d"href="#">阿里巴巴</a></li>
<li class="p"><a class="d"href="#">阿里巴巴</a></li>
<li class="p"><a class="d"href="#">腾讯视频</a></li>
<li class="p"><a class="d"href="#">土豆网</a></li>
<li class="p"><a class="d"href="#">北京葡萄藤</a></li>
<li class="p"><a class="d"href="#">阿里巴巴</a></li>
<li class="p"><a class="d"href="#">北京葡萄藤</a></li>
<li class="p"><a class="d"href="#">阿里巴巴</a></li>
</ul>
</div>
</div>
<div class="col-lg-8">
<div class="introduce">
<img src="tupian/土豆网.png">
<p>土豆攻速成立于1998年11月，是目前中国最大的互联网综合服务提供商之一，也是中国服务用户最多的互联网企业之一。
成立10多年以来，腾讯一直秉承一切以用户为依归的经营理念，始终处于稳健、高速发展的状态。2004年6月16日，
腾讯公司在香港联交所主板公开上市（股票代号700）。</p>
</div>
<div class="introduce">
<p>土豆是中国最早和最具影响力的网络视频平台，是中国网络视频行业的领军品牌。其前身土豆网2005年4月15日
正式上线，是全球最早上线的视频网站之一。2014年1月，"土豆网"正式更名为"土豆"，标志着土豆进入品牌发展的新阶段。</p>
</div>
<div class="introduce">
<p>"每个人都是生活大丹导演"是土豆从创立第一天始的价值观。土豆相信年轻人的想象力、创造力,相信土豆的平台能帮助年轻人
创造出更多，更好的影像作品，来表达自己、生活和这个时代的看法。同时，土豆提倡尊重"每个人"的个性，尊重每个人自主地选择
自己的生活，成为自己成长的导演。</p>
</div>
<div class="introduce">
<p>2012年3月12日，优酷股份有限公司（NYSE:YOKU）("优酷")和土豆股份优先公司(NASDAQ:TUDO)（"土豆"）共同宣布，
优酷和土豆将以100%换股份防守合并。2012年8月20日，优酷土豆并方案获双方股东大会高票批准通过，优酷土豆集体公司正式诞生。
2013年4月，优酷土豆宣布进入"集团BU化"运营阶段，提出"优酷更优酷，土豆更土豆"的发展战略。</p>
</div>
<div class="introduce">
<p>2013年2月，杨伟东成为土豆总裁，宣布打造土豆"成为中国年轻人最喜爱的视频网站"，并明确土豆"成为中国最具影响力的
青年文化品牌"的愿景，确立土豆"青春、自主、有趣"的品牌定位，土豆全面进入2.0阶段。通过年轻化的内容、年轻化的
产品技术和年轻化的UGC/PGC生态三个方面来全面推动土豆2.0攻略。</p>
</div>
<div class="introduce">
<p>2014年3月土豆推出"4+1"战略。其中"4"代表的是土豆在内容方面更专注动漫、音乐、韩国娱乐、时尚四个垂直文化领域。
而"1"则代表土豆推出的"一个频道"战略，基于"频道主"和"订阅者"两个视角全方面架构跨屏和线上线下体验系统，
并结合用户体验、商业模式、运营机制等环节，提出5个"一"规划。</p>
</div>
<div class="introduce" style="margin-bottom: 300px;">
<p>根据第三方调研公司艾瑞的数据，优酷土豆集团在PC端和移动端全平台各项数据持续占据视频行业绝对领先优势，截止2014年3月，
土豆每个月独立访问用户数据增长到2.43亿。2013年土豆在移动端增长也非常迅猛，2013年三季度，土豆移动端获得高速增长，
月均覆盖用户较当年3月增长11倍，平均增长率超过40%;月均视频播放量增长23倍，月平均增幅度达60%。</p>
</div>
</div>
</div>
</div>
</div>
<div class="low row" style="--bs-gutter-x: 0;">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="public1">
<p>技能树——改变你我</p>
</div>
<div class="public1">
<p>关于我们|联系我们|合作企业</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="public2">
<p>旗下网站</p>
</div>
<div class="public4">
<p>草船云孵化器</p>
<p>最强IT特训营</p>
</div>
<div class="public4">
<p>葡萄藤轻游戏</p>
<p>桌游精灵</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="public3">
<p>微信公众号平台</p>
<img src="tupian/qrcode_for_gh_32213eeb65ba_1280.png">
</div>
</div>
</div>
</div>
</body>
</html>
页面示图：
任务九深度思考：
1.如何使用bootstrap栅格系统？
bootstrap
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
bootstrap栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
使用规则
1、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。
2、在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。
3、具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素
4、通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响
2.媒体查询如何使用？
Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。
前面简单的介绍了Media Queries如何引用到项目中，但Media Queries有其自己的使用规则。具体来说,Media Queries的使用方法如下。
@media 媒体类型and （媒体特性）{你的样式}
注意：使用Media Queries必须要使用“@media”开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。
媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，
而且这两个部分之间使用冒号分隔。例如：
从前面表中可以得知，主要有十种媒体类型和13种媒体特性，将其组合就类似于不同的CSS集合。
但与CSS属性不同的是，媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，
而不是使用小于（<）和大于（>）这样的符号来判断。接下来一起来看看Media Queries在实际项目中常用的方式。
1. 最大宽度max-width
“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：
@media screen and (max-width:480px){
.ads {
display:none;
}
}
上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。
2.最小宽度min-width
“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。
上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。
3.多个媒体特性使用
Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，
表达式又可以包含0到多个关键字，以及一种媒体类型。
当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示。
@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}
4.设备屏幕的输出宽度Device Width
在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。
同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，
也就是指可视面积分辨率。
5. not关键词
使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作
如：
@media not print and (max-width: 1200px){样式代码}
上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。
6.only关键词
only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。
其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性的设备，
正常调用样式，此时就当only不存在；表示不支持媒体特性但又支持媒体类型的设备，这样就会不读样式，
因为其先会读取only而不是screen；另外不支持Media Queries的浏览器，不论是否支持only，样式都不会被采用。如
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />
在Media Query中如果没有明确指定Media Type，那么其默认为all，如：
<link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" /></pre>
另外在样式中，还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中，指定方式如下所示。
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。
到目前为止，CSS3 Media Queries得到了众多浏览器支持，除了IE6-8浏览器不支持之外，在所有现代浏览器中都可以完美支持。
还有一个与众不同的是，Media Queries在其他浏览器中不要像其他CSS3属性一样在不同的浏览器中添加前缀
3.响应式的优点与缺点？
什么是响应式网页设计？
响应式网页设计（Responsive Web Design简称RWD）这个术语，由伊桑•马科特（Ethan Marcotte）提出，是一种网页设计的技术做法。
该设计应当根据设备环境(系统平台、屏幕尺寸)进行相应的响应和调整。
手机端响应式网页设计也变得更加重要，因为移动端流量现在占互联网流量的一半以上。因此，谷歌宣布移动设备时代的到来。
如何实现响应式网页开发？
需要综合运用三个方法步骤：
第一步，Media query - 即指定不同的 CSS 显示风格
第二步，Fluid grid-即在 CSS 中使用百分比%而不是绝对值，如像素px来修饰页面布局元素的尺寸如 Div。
第三步，Fluid images/media-同样使用百分比%而不是绝对值，来修饰图像、视频、字体的显示的使其能根据不同屏幕作出调整。
响应式网页设计的优势：
1. 用户体验友好
响应式设计可以向用户提供友好的Web界面，因为它可以适应几乎所有设备的屏幕，包括智能手机、平板电脑、TV、PC显示器、iPhone和Android手机，
包括横向、纵向的屏幕。
2. 节省设计开发成本
相对需要开发电脑网站、pad网站、手机网站来说，响应式网站设计更有利于节省设计开发成本。
从设计角度出发，响应式网站界面只需要设计两套设计效果图。电脑端与iPad基本可以共用一套设计效果图，手机端重新设计一套就可以了。
从前端开发角度说，只需要根据临界点为不同终端开发三套不同的css样式；
从后期维护角度来说，再不需要分别维护pc界面、pad界面、移动界面，专心维护一个网站即可。
3. 积累分享
响应式Web设计可以让你(作为网站的拥有者)通过单一的URL地址收集所有的社交分享链接。你可以为创建更好、更友好的网站而做出积极贡献。
从另一个角度说，响应式网页设计是对SEO友好的。Google也建议优先采用响应式设计，
因为无论是什么网页版本都是相同的HTML、相同的内容，Google最容易处理。
响应式网页设计的劣势：
1. 对老版IE浏览器兼容性不友好
对于老版本IE（IE6、IE7、IE8）支持不好，这是一个致命的问题。如果你的网站用户大多还采用老版本IE的话，建议不做响应式网页设计。
2. 加载变慢
加载需要一定的时间 虽然，它不是一个大问题，在响应式设计中，需要下载一些看起来并不必要的HTML/CSS。除此之外，
图片并没有根据设备调整到合适大小，而这正是导致加载时间加倍的原因。
3. 增加开发时间成本
开发响应式网站是一项耗时的工作。如果你计划把一个现有网站转化成响应式网站，可能耗时更多。如果你想要一个响应式网站，
最好借助一些原型设计工具，例如Mockplus，从草图开始重新设计。
4. 影响布局
响应式Web设计的布局主要是液态的，这也正是设计者对设计样式不好控制的原因。
而且眼下正是设计者提前展示各种“复制品”的时候。设计者试图针对移动和桌面布局分别显示线框和设计原型。
只有等到这两种布局均得到提高后，响应式Web设计策略才能真正实现。
明天计划：完成接下来的任务。
返回列表
评论