页面定制CSS代码初探:页面变宽 文本自动换行 图片按比缩放

一、初识博客

初写博客,先在设置里选了个喜欢的模板

第一眼就爱上了呢!那极简的风格,我喜欢!!但是,应用后,却发现...

纳尼!模板上右侧那张漂亮的图片呢?!我的怎么什么都没有。没有图片好难看啊,瞬间无爱了,设置里找了下,-》博客侧边栏公告 《-,在这里,放了张宽200px的图,好看多了马上,还是有图才不会那么单调~

二、认识CSS

过了几天,打算写篇博,发现了一个重大的问题,怎么默认的宽度这么窄?那我放图片怎么办,而且,2边留那么多空白不浪费吗,留个5%就够了吧。于是乎,开始了2天的全折腾。

设置里找了下,发现个叫 页面定制CSS代码 的东西,上学的时候学过网页设计来着,还有点印象,但怎么用,呃,好像从来没有真正用过...

又是一顿Google,没找到想要的页面变宽的教程,喂,我只是想让页面变宽一点啊,不算多大的要求好伐?没办法,求人不如求己。查阅各种教程,然后自己在Chrome上F12照猫画虎瞎试,终于还是有了点收获。

1.既然要改它,首先要了解它。什么是CSS?打开一个网页,ctrl+U (Chrome)查看一下源代码,<head>部分除了注明标题<title>编码格式<charset>等,还会引入一堆东西,其中就有CSS(层叠样式表),可能还有JS脚本啥的。如下图:

CSS文件里面有#打头的id选择器,如:#red{color:red;};有.开头的类(class)选择器,如:.center {text-align: center};还有其他的。更多了解:http://www.w3school.com.cn/css/css_intro.asp

2.干巴巴的容易迷糊,上张图说话(图片是用Chrome F12 看到的调试界面)

如图所示,CSS通常是跟一种叫做<div>的标签结合一起用的,<div></div>声明了某一个区块,通常是<div id/class="xxx">,这样,被声明的那一块就都应用了那种样式(属性),选中后右边可以看到样式出自哪个文件,都包含了哪些属性。

Tips: 在属性那里单击可以进行添加/修改,并且会有实时效果,我就是这么一点点试的,不得不说,Chrome 真的非常强大。

三、界面的修改过程

1.原图:

如图所示,模板的宽度被写死到1000像素,这样导致的问题是大屏幕浏览器2边会漏的很多,而且放图片什么的也不方便,简直就是对页面的浪费。

2.宽度的调整过程

开始动手,通过在设置里写进CSS规则去覆盖默认设置,我们让宽度设定为浏览器宽的95%,2边各留一点,否则不好看。

1 /* 主界面和导航栏居中显示用户屏幕的95% */
2 #main,#navigator {
3     width: 95%
4 }

刷新一下,纳尼,右边怎么回事啊?

看了一下,原来main下边的子元素mainContent也被写死了,宽765像素

改一下吧,查了下属性的可用值,决定用百分比,先写个100%试试,结果

页面变宽了,而且文字也能自适应换行了,但是。我擦,我的侧边栏呢?!往下拉,原来跑地下去了... 这可不行啊。后来改到90%,85%,因为侧边栏用百分比的话会被拉得特别难看,而mainContent这边width值又不能设成 100%-232px ,所以这问题一直没好的解决办法,只能先设成80%然后在加上侧边栏占的200+16*2=232px。

但是会引起两个问题:

1.由于设定的是相对页面80%,右侧边栏是固定宽,所以屏幕分辨率越大时,侧边栏右侧空的越多。(侧边栏默认左对齐)

2.浏览器缩小到一定程度时,侧边栏还是会被挤到下边

通过研究别人博客的排版,然后设置页面最小宽度一定程度上解决了第2个问题。

1 /* 低于指定像素则不再进行横向缩放,防止侧边栏被移到正文下面,导致太难看 */
2 #home { min-width: 1240px }

这样设定一个值后,保证侧边栏还没有被挤到下边去的时候,通过页面出现横向滚动条解决此问题。

后来,通过查询CSS元素语法,我发现了一个叫做position的神奇的属性。通过指定它解决了主界面与侧边栏共存的问题。

1 /* 主界面宽度自动,右侧留出232像素,以父元素为基准进行绝对定位 */
2 #mainContent{
3     width: auto;
4     position: absolute;
5     left:0px;
6     right: 232px;
7 }
8 /* 侧边栏向右靠齐 */
9 #sideBar{float:right}

3.图片的等比缩放

上面的解决了以后又遇到一个新的问题,图片怎么缩放,默认最大宽度1000px写死的,一开始绕了点远路,在改了max-width=100% 以后还设置了width: 100%;让图片可以充满父元素,但是这样不仅同比缩小,而且浏览器分辨率很高的话(超过图片原始尺寸很多的话),图片也会等比放大,这样造成失真,很难看。

本来我想先凑活着吧,但我一想到以后可能会上传大的图片,你放大点没关系,但如果放一个小小的icon,你也给同比放大,那...我都不敢想了。

后来我就在网上各种找怎么让图片只同比缩小,但不同比放大的方法,网上很多CSS还有很多JS的,看着都很麻烦,看的头都大了,折腾了一晚,今早醒了后又在F12各种调,弄着弄着发现只设置max-width: 100%;就可以实现我的需求啊。

1 /* 让图片等比缩小,超过原始尺寸则不放大*/
2 #cnblogs_post_body img{
3     max-width: 100%;
4 }

还改了改留言栏的宽度和高度,让与主界面更搭一点。

四、完整CSS源码

最后,奉上CSS代码,有需要的直接复制到你们设置项里粘贴保存一下就可以了,注意要跟我是同一个模板啊,不然不保证会出什么问题。

 1 /* 低于1024像素则不再进行横向缩放,防止侧边栏被移到正文下面,导致太难看,有了position现在可以去掉了 */
 2 #home { min-width: 1024px }
 3 /* 主界面和导航栏居中显示用户屏幕的95% */
 4 #main,#navigator{width:95%}
 5 /* 主界面宽度自动,右侧留出232像素,以父元素为基准进行绝对定位 */
 6 #mainContent{
 7     width: auto;
 8     position: absolute;
 9     left:0px;
10     right: 232px;
11 }
12 /* 让图片等比缩小,超过原始尺寸则不放大*/
13 #cnblogs_post_body img{
14     max-width: 100%;
15 }
16 /* 侧边栏向右靠齐 */
17 #sideBar{float:right}
18
19 /* 留言板宽度跟随父元素,高度设为200像素 */
20 div.commentform textarea{
21   width:100%;
22   height: 200px;
23 }
24 /* 因为mainContent的position: absolute; 属性导致了这块显示出现了问题,隐藏掉元素 */
25 #footer{visibility: hidden}
时间: 02-24

页面定制CSS代码初探:页面变宽 文本自动换行 图片按比缩放的相关文章

博客园页面定制CSS代码

博客园页面定制CSS代码 1 #home { 2 margin: 0 auto; 3 width: 80%;/*原始65*/ 4 min-width: 980px;/*页面顶部的宽度*/ 5 background-color: rgba(245, 245, 245, 0.7); 6 padding: 30px; 7 margin-top: 50px; 8 margin-bottom: 50px; 9 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);

页面定制CSS代码-博客侧边栏公告-页首Html代码-页脚Html代码

设置代码前说明:首先你得选用博客皮肤darkgreentrip,否则会出错 页面定制CSS代码: 说明:标注颜色位置可自行修改,第12行设置主页底层图片,可自行修改 #home { margin: 0 auto; width: 80%;/*原始65*/ min-width: 980px;/*页面顶部的宽度*/ background-color: rgba(245, 245, 245, 0.7); padding: 30px; margin-top: 50px; margin-bottom: 50

页面定制CSS代码

博客皮肤:SimpleMemory .catListTitle { margin-top: 21px; margin-bottom: 10.5px; text-align: left; border-left: 10px solid rgba(82, 168, 236, 0.8); padding: 5px 0 5px 10px; background-color: rgba(245,245,245,0.3);}.newsItem, .catListEssay, .catListLink, .c

博客的页面定制CSS

我目前的博客CSS其实也是借用了别家的,来源:https://www.cnblogs.com/Penn000/p/6947472.html 注意使用的模板是:darkgreentrip 复制粘贴使用就好,啊,提醒一下,如果想要换图片的话是这里哦: 红圈处的url改一下就好 #home { margin: 0 auto; width: 80%;/*原始65*/ min-width: 980px;/*页面顶部的宽度*/ background-color: rgba(245, 245, 245, 0.

ZDLQ、ZAZQ高温导热油调节阀页面定制CSS代码转换

<div style="margin: 20px auto; padding: 10px; border: 0px; list-style: none; zoom: 1; width: 800px; background: rgb(240, 240, 240); overflow: hidden;"> <a href="http://www.fm058.com/html/2737.html"> <img alt="ZDLQ.Z

H72H、H72Y对夹式高压止回阀页面定制CSS代码转换

<div style="margin: 20px auto; padding: 10px; border: 0px; list-style: none; zoom: 1; width: 800px; background: rgb(240, 240, 240); overflow: hidden;"> <a href="http://www.fm058.com/html/425.html"> <img alt="H72H.H7

【原】移动web页面给用户发送邮件的方法 (邮件含文本、图片、链接)

微信商户通有这么一个需求,用户打开H5页面后,引导用户到电脑下载设计资源包,由于各种内部原因,被告知无后台资源支持,自己折腾了一段时间找了下面2个办法,简单做下笔记. 使用maito功能,让用户自己给自己发送一份包含资源包的下载链接 调用QQ邮件分享功能,让用户自己给自己发送一份包含资源包的下载链接 maito使用方法 1.基础写法 当浏览者点击这个链接时,浏览器会自动调用默认的客户端电子邮件程序,并在收件人框中自动填上收件人的地址下面 <a href="mailto:[email pro

博客园 css页面定制代码

1.勾选"禁用模板默认CSS" 2.将下面代码粘贴到"页面定制CSS代码"部分 1 /*公用*/ 2 body { 3 font-size:15px; 4 padding:0; 5 margin:0; 6 font-family:"微软雅黑","宋体",Arial; 7 background:#205424 url('http://pic1.win4000.com/wallpaper/1/59705b12dec18.jpg')

博客园页面定制

页面定制CSS代码 @font-face { font-family: 'FontAwesome'; font-style: normal; font-weight: normal; src: url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), url("http://blog.zhaishidan.cn/css/font/f