html网页制作代码案例,静态网站源码

2019独角兽企业大额募集Python工程师标准

响应式网站：

响应性网页设计(Responsive Web design )的理念是，页面的设计和开发应根据用户的行为和设备环境(系统平台、画面尺寸、画面方向等)进行相应的响应和调整。具体实践方法由多方面组成，包括灵活的网格和布局、图片、CSS媒体查询的使用等。无论用户是在使用笔记本电脑还是iPad，我们的页面都必须能够自动在分辨率、图像大小、相关脚本功能等之间切换，以适应不同的设备，这意味着页面会自动适应用户的设备环境响应式网页设计是指一个网站与多个终端——兼容，而不是为每个终端创建特定版本。这样，我们就不需要为不断到来的新设备进行特殊的版本设计和开发。

所有灵活性：

我们通过响应性的设计和开发构想使页面更加灵活。图像的大小会自动调整，页面布局不会被破坏。永远不会有完美的解决方案，但会给你更多的选择。无论用户切换设备屏幕的方向，还是从桌面屏幕导航到iPad进行浏览，页面都变得真正灵活。通过液态网格和液态图像技术，在正确的位置使用了正确的HTML标记。

响应性图像：

响应型图像技术思想：不仅比上年缩小图像，而且用小设备降低图像本身的分辨率。这个技术的实现需要一些相关文件，我们可以在Github上找到。包括JavaScript文件(rwd-images.js )、 htaccess文件和一些示例资源文件。大致原理是，rwd-images.js检测当前设备的屏幕分辨率，对于大屏幕设备，在页面的头部分添加BASE标签，然后将加载图像、脚本和样式表的请求添加到虚拟路径'/rwd-router 当这些请求到达服务器端时， htacces文件将确定这些请求需要的是原始图像还是小尺寸的“响应图像”，并提供适当的反馈输出。小屏幕移动设备决不会使用原始大小的大图像。

源代码：

！文档类型html

html

头戴

meta charset='utf-8 '

title无标题文档/title

style type='text/css '

*{margin:0； padding:0}

body { background 3360 URL (img/bj.jpg ) no-repeat fixed；背景大小： cover； }

# nav # logo { background : rgba (255、255、255、0.3 ) URL (img/logo.png ) ) center no-repeat； width:80px； height:80px；显示： block；位置： absolute； top:0px； left:50px； border :2 px固态# fff； border-radius:40px； z-index:999； }

#nav#ringa:nth-child(1) background:rgba ) 255，255，1 ) URL(img/1_28.png ' ) top no-repeat }

#nav#ringa:nth-child(2) background:rgba ) 255，255，1 ) URL(img/1_29.png ' ) top no-repeat }

#nav#ringa:nth-child(3) background:rgba ) 255，255，1 ) URL(img/1_30.png ' ) top no-repeat }

#nav#ringa:nth-child(4) background:rgba ) 255，255，1 ) URL(img/1_31.png ' ) top no-repeat }

#nav#ringa:nth-child(5) background:rgba ) 255，255，1 ) URL(img/1_32.png ' ) top no-repeat }

#nav#ringa:nth-child(6) background:rgba ) 255，255，1 ) URL(img/1_33.png ' ) top no-repeat }

#nav#ringa:nth-child(7) background:rgba ) 255，255，1 ) URL(img/1_34.png ' ) top no-repeat }

#nav#ringa:nth-child(8) background:rgba ) 255

,255,255,1) url("img/1_35.png")top no-repeat;}

@media screen and (min-width:880px){

#nav{width:100%; height:70px;}

#nav #logo{position:absolute; top:0px; left:50px;}

#nav #ring{width:860px; height:70px; background:#FFF; position:relative; margin:0px auto;}

#nav #ring a{display:inline-block;/*行内快级元素并排展示*/ width:100px; height:40px; margin:15px 0px;}

}

@media screen and (max-width:880px){

#nav{width:256px; height:256px; border-radius:50%; position:fixed; bottom:10px; left:10px;}

#nav #ring{width:256px; height:256px; background:rgba(0,0,0,0.4); position:relative; margin:0px auto; border-radius:50%;}

#nav #logo{position:absolute; bottom:10px; left:10px; top:0px; right:0px; margin:auto;}

#nav #ring{transform:scale(0.1) rotate(-270deg);/*将8小盒子缩小为0.1倍，同时改变角度为-270*/ opacity:0; transition:all 500ms ease-out;/*过渡将改变的元素变化过程所发生时间变长*/}

#nav #ring a{ display:block; width:40px; height:40px; border-radius:20px; position:absolute;/*按照圆排列*/ margin-left:-20px; margin-top:-20px;}

#nav:hover #ring{ transform:scale(1) rotate(360deg); opacity:1;}

}

</style>

</head>

<body>

</div>

var ico=document.querySelectorAll('.menuico');

for(var i=0,l=ico.length; i<l; i++){

ico[i].style.left=(50 - 35*Math.cos(-0.5*Math.PI-2*(1/l)*i*Math.PI)).toFixed(4)+"%";

ico[i].style.top=(50+35*Math.sin(-0.5*Math.PI-2*(1/l)*i*Math.PI)).toFixed(4)+"%";

}

</script>

</body>

</html>

转载于:https://my.oschina.net/zhouhang0907/blog/533220