网页制作的样式

工具/原料html页面vs2008步骤：1、点击【文件】【新建文件】【常规】【HTML页面】【打开】2、如图所示，新建了一个空白的html页面，拆分视图3、设置页面body样式信息【-webkit-touch-callout: none; -webkit-text-size-adjust: none;】是防止用户复制和保存图片,只支持iphone、ipad、android4、设置页面的宽度和高度【.page-content{background:-webkit-linear-gradient(#2F5A53,#6CA199); top:352px; min-height:550px;_height:550px;width:640px; }】5、【关键点】新建一个div标签，样式使用page-content6、在段落标记<p>里面输入文字信息，这里天使就不排版了，主要是教大家方法，然后保存网页。7、将网页上传到服务器目录下8、输入网站域名，在电脑上访问可以看见效果，只有左侧部分9、使用手机访问，得到如图所示效果，就不会像直接书写html代码一样文字很小

具体要求是什么。你学了多少内容？如果只是图上的页面的样子的话，我能做出来 我们学了div和表格，求代码这个页面可不是div和表格就能做出来的。我今天先大致做一下。 你的图片我看不清，文字和图片我就先随便写了 还有就是不要提前采纳，不然我无法上传做好的图片了 老师说用div做的出来，表格也行 我现在电脑不在，不然我发给你 你们学CSS了吗？ 学了 好，你先慢慢等吧，我和下午把做的进度发给你看 好的，谢谢 这是我目前做出来的大致样式。内容和具体样式例如颜色间距之类的内没有具体的清晰的图不好做。图片的素材这玩意也不好找，所以我暂时用了我电脑上的图片。你看接下来该怎么办？ 加个qq我把文件发给你 加了

在工具上，手机版网页和电脑版网页没有什么区别，可以根据自己的喜好。我是喜欢用Dreamweaver的，而且Dreamweaver cs6有个多屏预览的功能，可以很方便的预览手机、平板、PC端的效果。不过Dreamweaver 挺大的，还有很多比较快比较好的编辑器，比如EditPlus，这还是看个人的习惯和喜好了。推荐一个编辑器sublime text，我自己觉得超好用。在代码方面的话：首先得加上这样的一行。设置宽度、高度、是否能够缩放。<meta name="viewport" content="width=device-width,inital-scale=1.0,minimum-scale=0.5,maximum-scale=2.0,user-scalable=no">然后，主要是要考虑适配。比较好的是做到自适应。这个可以搜一下，我记得月光博客里面就有篇很详细的。其次，可以用@media only screen and(min-device-width : 320px) and(max-device-width : 480px){ }来对不同像素的屏幕写不同的样式。可以看下知乎的登录页面，用的就是@media。再然后要考虑的是用户体验。简单的拿个链接来说，在PC端因为有鼠标，很容易点到。可是手机端就不一样，就几个字的链接很难点到，所以就要扩大点的面积。这就是为什么会出现电脑版的网页和手机版网页。其实做手机版的网页有个好处就是可以大量的使用HTML5和CSS3，这样能做出很多效果。对于这些的话，看附件里面的学习方法有帮助的很抱歉，回答者上传的附件已失效

在工具上，手机版网页和电脑版网页没有什么区别，可以根据自己的喜好。我是喜欢用Dreamweaver的，而且Dreamweaver cs6有个多屏预览的功能，可以很方便的预览手机、平板、PC端的效果。不过Dreamweaver 挺大的，还有很多比较快比较好的编辑器，比如EditPlus，这还是看个人的习惯和喜好了。推荐一个编辑器sublime text，我自己觉得超好用。在代码方面的话：首先得加上这样的一行。设置宽度、高度、是否能够缩放。<meta name="viewport" content="width=device-width,inital-scale=1.0,minimum-scale=0.5,maximum-scale=2.0,user-scalable=no">然后，主要是要考虑适配。比较好的是做到自适应。这个可以搜一下，我记得月光博客里面就有篇很详细的。其次，可以用@media only screen and(min-device-width : 320px) and(max-device-width : 480px){ }来对不同像素的屏幕写不同的样式。可以看下知乎的登录页面，用的就是@media。再然后要考虑的是用户体验。简单的拿个链接来说，在PC端因为有鼠标，很容易点到。可是手机端就不一样，就几个字的链接很难点到，所以就要扩大点的面积。这就是为什么会出现电脑版的网页和手机版网页。其实做手机版的网页有个好处就是可以大量的使用HTML5和CSS3，这样能做出很多效果。对于这些的话，看附件里面的学习方法有帮助的很抱歉，回答者上传的附件已失效

属于内嵌样式。例如：123<div  style="background:#ccc,width:300px; height:200px">样式</div>这个表示，图层 高度:200px ,宽度：300px, 背景：#ccc;   

　　为了能让网站设计正常的运行于各种浏览器平台，网站设计师们不得不想尽办法处理好网站建设中的浏览器兼容问题。正是因为网站设计当中的这一需要产生了一项新技术— CSS Hack。 CSS Hack 就是针对不同浏览器写出不同的 CSS code 的过程，主要用来解决目前各类浏览器无法标准解析CSS样式，导致同一网站设计页面在不同浏览器下出现显示效果不一致的兼容问题。 针对不同浏览器，可以将CSS Hack 网站设计代码整理如下： 　　1、针对I E 系列浏览器的网站设计代码 针对 IE 6 的专属 CSS Hack 网站设计代码 #id{ _display: block; } 也就是在网站设计CSS属性前加一个小划线就好。 针对 IE 7 的专属 CSS Hack 网站设计代码 #id{ *display: block; } 即在网站设计CSS属性前加上一个星号即可 针对 IE 8 的专属 CSS Hack 网站设计代码 #id{ margin-top: 10px 9; /*IE8*/ } 如上所示，解决办法为在网站设计CSS属性后分号前加上空格与斜线并加入一个数字9即可 。　　2、针对火狐的CSS Hack 网站设计代码 火狐可谓是最标准的浏览器之一了，网站设计技术只要稍稍不到位就能体现得淋漓尽致，所以不少网站设计师也很头痛，其实想要解决火狐的兼容性除了要把网站设计的基础知识扎牢之外只要将CSS代码写入到下图 @-moz-document url-prefix（）{ } 里面就行了 @-moz-document url-prefix() { #id{ display: block; } } 。　　3、针对 Safari 的CSS Hack 网站设计代码 Safari是苹果计算机的最新作业系统Mac OS X中新的浏览器，用来取代之前的Internet Explorer for Mac，使用了KDE的KHTML作为浏览器的运算核心。 @media screen and (-webkit-min-device-pixel-ratio:0) { #id { display: block; } } 兼容性做法和火狐相近。　　4、针对 Opera 的CSS Hack 网站设计代码 Opera即Opera Software ASA，是台式机、各种设备和移动网络浏览器市场的商业领袖，因快速、小巧和比其他浏览器更佳的标准兼容性获得了国际上的最终用户和业界媒体的承认，并在网上受到很多人的推崇。 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body #id { display: block; } } 这个世界上必然不会存在绝对完美的事物，因此运用以上方法让我们的网站设计更好的与各种浏览器兼容的时候其实已经违反了网站制作的W3C标准。

1.css是网页表现与内容分离的一种样式设计语言，就比如每个人都有一双眼睛、两只耳朵、两个鼻孔、一个嘴巴，而长的丑的人只是他的面部样式不符合大众的审美观。2.网站制作中之所以要使用css，是为了让页面布局样式等更加美观从而吸引阅读者。就好比一个五官精致的美女大家都爱看一样！3. ①行内样式。例如：<p style="color:red;">样式</p>(实际效果是p标签中的字体为红色)②内嵌样式。列如<p class="test">样式</p> <style>.test{color:red;}</style>(效果同上)③外联样式。列如把代码 .test{color:red;} 保存在style.css文件中，然后在页面中引入<link type="text/css" rel="stylesheet" href="style.css" />(效果同上)（望采纳哦！~~）

1.css是网页表现与内容分离的一种样式设计语言，就比如每个人都有一双眼睛、两只耳朵、两个鼻孔、一个嘴巴，而长的丑的人只是他的面部样式不符合大众的审美观。2.网站制作中之所以要使用css，是为了让页面布局样式等更加美观从而吸引阅读者。就好比一个五官精致的美女大家都爱看一样！3. ①行内样式。例如：<p style="color:red;">样式</p>(实际效果是p标签中的字体为红色)②内嵌样式。列如<p class="test">样式</p> <style>.test{color:red;}</style>(效果同上)③外联样式。列如把代码 .test{color:red;} 保存在style.css文件中，然后在页面中引入<link type="text/css" rel="stylesheet" href="style.css" />(效果同上)（望采纳哦！~~）

文本框的高度可以由里面字体的大小来决定的。比如你要设置文本框的高度16px，你就可以设置文本框内的字体font-size为16px（实际上文本框会比字体大一些）。然后有些为了效果更好看点，你可以在文本框内加上个内边距，如2px，这样字就不会紧挨着文本框了，望采纳！