网页代码实例(简单代码)
这篇文章给大家聊聊关于网页代码实例，以及简单代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。
css网页的几种布局实例
本文主要介绍了浅谈css网页的几种布局的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
2018年已经过了一周，总结一下2017年在公司wiki上写的一篇关于css布局的知识，当时也借鉴了几个大神写的css布局知识，和自己在项目中遇到的坑。废话不多说。请看以下的干货。
1、左边固定，右边自适应布局的两种实现方式
效果图如下：
大屏展示：
小屏展示：
第一种实现方式通过负边距与浮动实现左边固定，右边自适应的布局。主要代码如下：
<style type="text/css">
.left{
float: left;
width: 100%;
height: 200px;
background-color: red;
}
.left-content{
margin-left: 30%;
}
.right{
float: left;
width: 30%;
margin-left:-100%;
height: 200px;
background-color: green;
}
.layout0{
clear: both;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<body>
<p id="body">
<p class="left">
<p class="left-content">
设置子元素的margin,然后父元素必须浮动。
用父元素包裹，主要是因为right会覆盖left，从而导致left内容不可以看到，如果直接在left上设置margin或者padding会导致布局变化，因此只能再用一个p包裹内容，并且去除right覆盖的宽度。
</p>
</p>
<p class="right">-margin必须大于或等于自身的宽度才会上移</p>
<p class="layout0"></p>
</p>
</body>实现过程中需要注意的是:
1.自适应的容器需要容器包裹住，否则容器内的内容会被覆盖。
2.right容器的负边距必须大于或等于自身的宽度才会上移。
3.如果right容器负边距等于自身的宽度它会靠右对齐，如果负边距等于-100%，则会靠左对齐。
第二种通过浮动布局来实现左边固定，右边自适应的布局
主要的代码如下：
<style type="text/css">
.left{
float: left;
width: 200px;
height: 200px;
background-color: yellow;
}
.right{
padding-left: 200px;
height: 200px;
background-color: red;
}
@media(min-width: 650px) and(max-width: 1000px){
.left{
width: 150px;
}
.right{
margin-left: 150px;
}
}
@media(max-width: 640px){
.left{
width: 100px;
}
.right{
margin-left: 100px;
}
}
</style>
<body>
<p id="main">
<p class="left">左边固定宽度，右边自适应</p>
<p class="right"></p>
</p>
</body>实现过程中需要注意的是： 1. left需要脱离文档流，而right只需要正常显示就可以。
2.left只是覆盖在right上边，因此想要让right内容完整显示需要给right padding-left或者margin-left。
大屏展示：
小屏展示：
主要代码如下：
<style type="text/css">
#head{
height: 200px;
background-color: yellow;
}
#body{
width: 100%;
float: left;
}
.main{
background-color: green;
min-height: 200px;
margin: 0 210px;
}
.left{
float: left;
background-color: red;
width: 200px;
height: 200px;
margin-left:-100%;
}
.right{
float: right;
background-color: blue;
width: 200px;
height: 200px;
margin-left:-200px;
}
#footer{
clear: both;
height: 200px;
background-color: orange;
}
</style>
<body>
<p id="head">即左右固定，中间自适应，它可以利用margin-left为负数来实现，它的实现原理就是margin为负值可以改变float元素的排列位置</p>
<p id="body">
<p class="main">当多个元素同时从标准流中脱离开来时，如果前一个元素的宽度为100%宽度，后面的元素通过负边距可以实现上移。当负的边距超过自身的宽度将上移，只要没有超过自身宽度就不会上移</p>
</p>
<p class="left"></p>
<p class="right"></p>
<p id="footer"></p>
</body>实现过程中需要注意:
1.中间自适应的p需要放在left和right容器前面并且内容p需要用父容器包裹
2.left和right容器向同一个方向浮动。
主要代码如下：
<style type="text/css">
#head{
height: 200px;
background-color: yellow;
}
#body{
overflow: hidden;
}
.left{
float: left;
background-color: red;
width: 200px;
height: 200px;
}
.right{
float: right;
background-color: blue;
width: 200px;
height: 200px;
}
.main{
background-color: green;
height: 200px;
margin: 0 210px;
}
#footer{
clear: both;
height: 200px;
background-color: orange;
}
</style>
<body>
<p id="head">左右固定宽度并且向两边浮动，中间的p设置两边的margin</p>
<p id="body">
<p class="left"></p>
<p class="right"></p>
<p class="main">该方案有一个缺陷，在小屏幕情况下回导致right被挤下去，main没有了</p>
</p>
<p id="footer"></p>
</body>实现过程中需要注意:
1.该方式只需要注意中间自适应的p需要放在left和right容器的后面。
2.left和right容器向两边浮动。
主要代码如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>使用flex实现“双飞翼布局”</title>
</head>
<style type="text/css">
#main{
display: flex;
display:-webkit-flex;//谷歌浏览器加前缀
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
}
.left{
flex: 0 0 auto;
width:100px;
height: 200px;
background-color: red;
word-wrap: break-word;
overflow: hidden;
}
.main{
flex: 1 1 auto;
height: 200px;
background-color: green;
}
.right{
flex: 0 0 auto;
width: 100px;
height: 200px;
background-color: yellow;
}
</style>
<body>
<p id="main">
<p class="left">flex语法我参照了阮一峰关于flex语法介绍 ;
<p class="main"></p>
<p class="right"></p>
</p>
</body>
</html>如果未了解过flex布局请移至文末点击链接查看阮一峰大神写的关于flex语法
3、定位布局
这边就不絮絮叨叨的讲一些基础的css定位知识了（ps:不会的请自行到w3c官网查阅），我主要来讲解一下工作中遇到的坑。以免其他人和我一样掉入坑中。
第一：使用多个fixed时，注意自己需要基于什么定位，因为如果父级有用transform属性时，可能会导致子元素的fixed基于父元素容器定位，而不是基于body定位。效果如下：
在上图中我可以发现中间黑色的小框是基于父级来定位，并且宽度也基于父容器的50%。详细的请看下面代码：
<!DOCTYPE html>
<html>
<head>
<title>关于position的定位的坑</title>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
i{
font-style: normal;
cursor: pointer;
}
#delete-button{
position: absolute;
left: 45%;
top: 45%;
text-align: center;
vertical-align: middle;
height: 50px;
margin: auto;
cursor: pointer;
}
#delete-button> i{
display: inline-block;
width: 32px;
height: 32px;
border-radius: 16px;
background-color: orange;
color: red;
font-size: 32px;
vertical-align: middle;
line-height: 28px;
}
/*第一个模态框的样式*/
#layout{
display: none;
width: 100%;
height: 100%;
}
/*使用flex布局水平竖直居中*/
/*#layout-box{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: flex;
display:-webkit-flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
background-color: rgba(0,0,0,0.3);
}*/
/*使用postion和 transform水平垂直居中*/
#layout-box{
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
.modal-dialog{
position: absolute;
left: 50%;
top: 50%;
width: 500px;
height: 200px;
border-radius: 10px;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
background-color:#fff;
}
.dialog-title{
text-align: center;
color:#333;
font-size: 28px;
margin-bottom: 10px;
}
.dialog-content{
text-align: center;
color:#666;
font-size: 18px;
}
.dialog-button{
margin-top: 20px;
width: 100%;
color:#333;
}
.dialog-button>.button-box{
display: inline-block;
width: 48%;
text-align: center;
}
.button-box span{
display: inline-block;
padding: 10px;
color:#fff;
border-radius: 6px;
cursor: pointer;
}
#confirm{
background-color:#27ad9a;
}
#cancel{
background-color: red;
}
/*添加按钮的样式*/
#add-button> i{
display: inline-block;
width: 32px;
height: 32px;
border-radius: 16px;
background-color:#27ad9a;
color:#fff;
font-size: 32px;
vertical-align: middle;
line-height: 28px;
text-align: center;
}
#add-button{
display: inline-block;
cursor: pointer;
}
/*第二个模态框的样式*/
.layout2{
display: none;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.2);
}
.modal-dialog2{
position: fixed;
left: 50%;
top: 50%;
width: 50%;
height: 50%;
border-radius: 10px;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
background-color: rgba(0,0,0,0.2);
}
.modal-dialog2> span{
display: block;
}
.modal-text{
float: left;
}
#close{
color: red;
font-size: 24px;
float: right;
cursor: pointer;
}
</style>
<body>
<p id="delete-button"><i>-</i>删除</p>
<p id="layout">
<p id="layout-box">
<p class="modal-dialog">
<p class="dialog-title">提示</p>
<p class="dialog-content">是否删除该项,点击确定</p>
<p class="dialog-button">
<p class="button-box">
<span id="confirm">确定</span>
</p>
<p class="button-box">
<span id="cancel">取消</span>
</p>
</p>
<p id="add-butto
怎么在网页中插入图片html图片代码
在网页中插入图片html图片代码方法：
步骤：
一、html图片标签语法
<imgsrc="divcss-logo-201305.gif"width="165"height="60"/>
img介绍：
src后跟的是图片路径地址
width设置图片宽度
height设置图片高度
二、具体html图片显示实例
在html源代码中分别插入三张图片，一张原始大、一张将宽度高度改小小、一张将宽度高度改大。
1、实例完整html代码：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>图片插入html在线演示</title>
</head>
<body>
<p>原始大图片</p>
<p>
<imgsrc="divcss-logo-201305.gif"width="165"height="60"/>
</p>
<p>改小图片</p>
<p>
<imgsrc="divcss-logo-201305.gif"width="105"height="30"/>
</p>
<p>改大图片</p>
<p>
<imgsrc="divcss-logo-201305.gif"width="365"height="120"/>
</p>
</body>
</html>
2、html插入图片实例截图
3、在线演示：
在html网页中显示图片，插入图片，通过使用img标签来实现，通过也可以将图片作为CSS网页背景图片显示插入到Html网页中（css背景图片）。
边框设计网站-网页设计中的边框代码如何做
网站设计中搜索框的设计技巧有哪些
设计精美的网站当然很吸引人,但如果你的网站设计精美,内容上乘,就是不明白网站为何没达到运营预期目标,问题可能就出在搜素框这一元素的运用之上。本文指出了设计者必须避免的错误,并分享了一些搜索框设计技巧,希望在优化网站性能方面有所帮助。
在浏览整个网站中,搜索框通常是通向用户使用的最后一道关卡。如果你的网站内容很多,包含了详尽的特色,功能,设计元素,产品和服务等等,那么搜索框就成为了网站不可或缺的一部分。网站的成长往往需要时间。当然,从整个网站设计和开发过程来看,设计肯定要简洁,有文章和评论,以及非正式的网站通知,特色内容和服务等等。不过,随着网站层次不断提升和更新,与网站相关的内容的只是起到了装饰作用。因此,搜索框对网站的性能优化起到了至关重要的作用。
优质的职能和运作对网站开发确实很重要,但与此同时,我们也不可忽视网站的前端性能。你的网站也许在特色内容,功能以及内容质量等方面都很出众,但是,如果网站前端性能令人不满意,并且没有以用户为中心,那么网站其它方面做得再好,也起不到任何作用。
错误观念:搜索框不需要设计
在整个网站设计中,搜索框的外观要显眼,方便用户快速找到。网站站长普遍认为搜索框只是一个输入和提交内容的按钮而已,因此他们根本不需要花时间设计。
但是由于错误观念泛滥,站长们也错失了一些潜在的机会。由于设计上的缺失以及亮点不突出,用户通常会被搜索框的位置弄得焦头烂额,他们通常会点击“返回”按钮(离开网页)。因此,设计平庸,辨识度不高的搜索框就是导致这一切的元凶,如果想要网站获得可观的流量,但是网站转化率却低得离谱,这是不行的。
如果用户对你的网站感到失望,搜索框则有助于留住用户。在大量的网站中,真正带给用户绝佳体验的少之又少,用户有时还没深入了解整个网站,可能就不断点击后退,离开网页了。如果用户能进行搜索,他们只需在搜索框中输入自己想找的内容,上述问题也就迎刃而解了。
在如今这个快速成功的社会,时间就是金钱。搜索框不仅能帮助用户节约时间,还可带给用户高度愉悦和简洁的浏览体验。
搜索框设计技巧
在为网站设计搜索框时,你可重点考虑以下建议:
1.搜索框要显眼
搜索框要清晰可见,千万不可放在难以注意到的位置。即使你的网站主题是纯白色,为搜索框设置黑色的边框,选用红色等亮色作为字体颜色,这都可能会解决搜索框不明显的问题。
2.搜索框要有搜索框的样
你可以尝试在搜索框设计中融入创意,但是不要把它弄得不伦不类。这也是搜索框必须是框状的原因。访问网站的用户不会仔细浏览完整个网站的内容,他们只会关注自己感兴趣的内容,而且许多学习条件是受制于他们的行为,在用搜索框进行搜索时,实际上用圆角矩形的搜索框就可以了。
3.搜索框的位置
搜索框的位置对网站优化和性能提升十分重要。一般的经验表明搜索框的最佳位置应在网站顶部的左上角或右上角,因为用户希望节约时间和精力,直接搜索到他们所需的内容。但是受广告等内容的影响,迫使设计者将搜索框放在页面底部。这并没真正解决搜索框在网站中的实用性问题,必须避免。
另外,在每个网页中都放入搜索框是一个明智的主意,即使用户在网站中迷失,他们也能够方便地找到需要的内容。
4.为提交按钮取一个有创意的名字
搜索框的名字要取得有创意,不要简单地放上单调的“go”,“find”或“search”在旁边。不管给它起什么名字,只要不为难用户去猜意思就好。
5.为用户提供分类搜索
用户可自由搜索各种分类。同样的思路,你也可以显示分类,用户在输入区域进行搜索。在JavaScript的帮助下,用户只需将鼠标悬停在搜索框上,即可显示类型或进行用户自定义搜索,从用户的角度讲,这是一个很棒的选择。
设计者必须避免的错误
我们在试用其它网站的搜索时发现他们在搜索框的显示上犯了不少错。这些都是些很常见的错误,如果你希望通过搜索框优化网站性能,那么就必须得避免这些问题。
1.隐藏搜索框
我们反复强调搜索框的明确显示的必要性。不要把搜索框放在网站底部,放在网站的右上角效果会更好,如果网站设计得很混乱,用户在没有浏览到接近网站的底部时就已经离开网页了。
2.切忌输入区域过短
为用户提供所需范围准确的输入查询。搜索框输入区域太短只会让用户对搜索框感到失望,因为,他们不会在整个区域输入想查询的内容。再者,这也非常不方便用户阅读和回应。
3.切忌提交按钮过短
受网站设计限制,提交按钮不应过长,但是太短又会让用户感到失望,因为他们在鼠标点击的准确性上又会有偏差,从而浪费搜索时间,还会被转入到到一些不同页面上。
4.切勿将搜索框与其它菜单混排在一起
如果把搜索框和与新闻和导航条混排在一起,这是相当让人不爽的事。这样用户很难在邮件订阅或文章搜索栏中区分出搜索框。因此,搜索框应与其它菜单分开排列。
5.过度设计搜索框
不要因为搜索框要显眼,在设计时就受到影响。虽然搜索框要清晰地展现出来,但也不要设计过度,以免影响到它的直观性。
6.没必要提供高级搜索工具
高级搜索当然会有它的用处,但这会使本来简单的搜索变得更加复杂。因此,没必要提供高级搜索工具,除非你是为了迎合懂技术的用户。如果你只是搞定一般用户,尽量保持搜索选项简单。
7.一个搜索框有多个提交按钮
这条建议非常有意思,我们很少看到有网站设置了多个搜索提交按钮,比如同时有“go”和“find”。很明显,这会扰乱按钮的选择。
8.如果在网站设计中,你遵从了以上建议,我们相信一个高效的搜索框能够起到优化网站性能的作用。
网页设计中的边框代码如何做？
用到CSS样式和HTML标签元素,为了对html不同标签加边框虚线,我们选择几个常用标签对齐设置边框虚线效果.
1、html常用标签:p标签spanullitabletrtd;
2、实例用到CSS属性单词:borderwidthheight;
3、实现虚线的CSS重点介绍
border为边框属性,如果要实现对象边框效果,要设置边框宽度、边框颜色、边框样式(实线还是虚线).
border:1pxdashed#F00这个就是设置边框样式宽度为1px虚线,虚线为红色.
网页设计中的边框代码
1、打开html开发工具,新建一个html代码页面。html中创建一个div标签,给这个标签添加文字和一个class为了后面方便控制div的样式:
2、接下来在style标签设置div的样式,在solid类中将边框样式设为实线边框,颜色这里用默认的黑色:
3、保存html代码使用浏览器打开,即可看到浏览器页面上显示一个实线边框。以上就是网页设计中设置边框的详细步骤:
END，本文到此结束，如果可以帮助到大家，还望关注本站哦！