个人简介网页代码_响应式网页设计实战

最新推荐文章于 2024-06-14 08:08:55 发布

weixin_39669202

最新推荐文章于 2024-06-14 08:08:55 发布

阅读量599

点赞数

文章标签：个人简介网页代码响应式网页设计代码

1.设计思路

在本响应式网页设计中，通过媒体查询 @media 规则，使网页自适应不同浏览设备的屏幕宽度。网页中位于网页顶端，位于网页底端，二者不论在哪一种情况下，其宽度总是为浏览窗口宽度的100%，而、和根据不同浏览窗口的大小自适应其宽度，并以不同方式布局：

当浏览窗口宽度大于768px时，位于网页左侧、位于网页中间，位于网页右侧，适应桌面端浏览窗口；
当浏览窗口宽度大于480px小于768px时，和位于网页上方并由左至右排列、位于网页下方，适应ipad端浏览窗口；
当浏览窗口宽度小于480px时，、和由上至下依次排列，适应手机端浏览窗口。

2.网页截图

桌面端：

ipad端：

手机端：

3.代码实现

test.html

<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>testtitle><link rel="stylesheet" type="text/css" href="test.css"><script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js">script><script type="text/javascript">$(function(){function footerPosition(){$("footer").removeClass("fixed-bottom");var contentHeight = document.body.scrollHeight,//网页正文全文高度
                  winHeight = window.innerHeight;//可视窗口高度，不包括浏览器顶部工具栏if(!(contentHeight > winHeight)){//当网页正文高度小于可视窗口高度时，为footer添加类fixed-bottom$("footer").addClass("fixed-bottom");} else {$("footer").removeClass("fixed-bottom");}}footerPosition();$(window).resize(footerPosition);});script>head><body><header><h1>我的网页h1><p>——这是一个同时适应桌面端/ipad/手机的响应式网页p>header><div class="row"><nav class="col-25 col-s-25 menu"><ul><li>个人简介li><li>我的收藏li><li>联系方式li><li>历史记录li><li>关于我们li><li>更多功能li>ul>nav><article class="col-50 col-s-75 article"><h1>为什么我们需要开源的系统芯片h1><p>
                不再使用的芯片区域是一件大事，因为构建芯片可不像搭乐高积木那般简单，它更像是雕刻家刻在大理石快上的雕塑，因此添加电路的难度远远高于关闭电路。增加一条电路仅制作新的掩膜就大约需要花费100万美元，同时还会导致项目延迟70天(大约10万人时的额外工作)。而在正确计划的情况下，关闭一条电路非常简单，只需要修改代码，或者针对某个掩模层进行轻微改动，只需要花费大约1万美元以及几天的延迟(假设晶圆尚处于中期阶段，很容易进行这样的改动)。p><img src="https://img-blog.csdnimg.cn/2020111709205454.png">article><div class="col-25 col-s-100"><aside><h2>数据结构与算法h2><h2>计算机网络h2><h2>操作系统h2><h2>计算机组成原理h2><h2>计算机系统结构h2><h2>数据库原理h2>aside>div>div><footer><p>footer@2020p>footer>body>html>

test.css

* {
/* 初始化 取消页面的内外边距 */
padding: 0;
margin: 0;
/* 盒子模型 */
box-sizing: border-box;
}

/*在整个row下面增加空行内容*/
.row::after {
content: "";
clear: left;
display: table;
}

[class*="col-"] {
float: left;
padding: 15px;
width: 100%;
}

/*默认是手机端 0-480px*/

/*ipad端 481px-768px*/
@media only screen and (min-width: 481px) {
.col-s-25 {width: 25%;}
.col-s-75 {width: 75%;}
.col-s-100 {width: 100%;}
}

/*桌面端 769px+*/
@media only screen and (min-width: 769px) {
.col-25 {width: 25%;}
.col-50 {width: 50%;}
}

html {
font-family: Arial, Helvetica, sans-serif;
}

header {
background-color: darkblue;
color: white;
padding: 15px;
text-align: center;
}

header p {
margin-top: 15px;
}

.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}

.menu li {
background-color: deepskyblue;
color: white;
padding: 10px;
margin-bottom: 15px;
box-shadow: gray 1px 2px 2px;
transition-property: all;
transition-duration: .5s;
}

.menu li:hover {
background-color: darkblue;
}

.article {
background-color: wheat;
padding: 15px;
margin: 15px 0;
}

.article p {
padding: 15px;
}

aside {
background-color: deepskyblue;
color: white;
padding: 15px;
text-align: center;
font-size: 15px;
box-shadow: gray 3px 3px 3px;
}

aside h2 {
padding: 10px;
}

footer {
background-color: lightgray;
color: darkblue;
text-align: center;
font-size: 18px;
padding: 15px;
width: 100%;
}

img {
padding: 15px;
width: 100%;
height: auto;
}

/*动态地为footer添加类fixed-bottom*/
.fixed-bottom {
position: fixed;
bottom: 0;
width: 100%;
}

weixin_39669202

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
个人简介网页代码_响应式网页设计实战

1.设计思路在本响应式网页设计中，通过媒体查询@media规则，使网页自适应不同浏览设备的屏幕宽度。网页中位于网页顶端，位于网页底端，二者不论在哪一种情况下，其宽度总是为浏览窗口宽度的100%，而、和根据不同浏览窗口的大小自适应其宽度，并以不同方式布局：当浏览窗口宽度大于768px时，位于网页左侧、位于网页中间，位于网页右侧，适应桌面端浏览窗口；当浏览窗口...
复制链接

扫一扫