求高手给改个CSS,使其支持html5响应式自适应

西門冠希 2018-06-04 12:24:55
谢谢各位高手,模板是网上扒的,不太懂css, 不知道怎么修改。求高手给在原有的基础上修改下,使其支持html5自适应


因论坛字符限制,所以上传了网上。


http://www.jiudianping.cn/test/1.html


图片在同级目录,直接保存html即可!
...全文
1362 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
Logerlink 2018-06-09
  • 打赏
  • 举报
回复
呃呃.................................. 能力有限 另寻高手吧
西門冠希 2018-06-09
  • 打赏
  • 举报
回复
引用 9 楼 Logerlink 的回复:
背景图 将921行的#billboard{height: auto;}换成#billboard {/*height: auto;*/background:url(3.jpg) no-repeat 70% 0;background-size:320%;}
给你发个小红包,帮忙详细指点一下如何修改那个搜索框,在移动端和PC端自适应的吧
Logerlink 2018-06-06
  • 打赏
  • 举报
回复
背景图 将921行的#billboard{height: auto;}换成#billboard {/*height: auto;*/background:url(3.jpg) no-repeat 70% 0;background-size:320%;}
Logerlink 2018-06-05
  • 打赏
  • 举报
回复
呃呃 你自己ctrl + f 慢慢找吧 顺便一提 ctrl + g 可以定位所在行数 说实话 这是最基本的了
西門冠希 2018-06-05
  • 打赏
  • 举报
回复
引用 4 楼 Logerlink 的回复:
第一张图 不是那样注释的 只需要将5131-5137行注释掉就可以了 缩小的话 在.inner .jiexibox 后面加上这个 transform: scale(0.8); 背景图 将5450行的#billboard{height: auto;}换成#billboard {/*height: auto;*/background:url(3.jpg) no-repeat 70% 0;background-size:320%;}
没有那么多行数啊,大哥。能给截图看看注释哪里吗
-NorthStar- 2018-06-05
  • 打赏
  • 举报
回复
这个还是自己慢慢来吧 别人改的你用的时候还是找不到位置
西門冠希 2018-06-05
  • 打赏
  • 举报
回复
引用 6 楼 Logerlink 的回复:
呃呃 你自己ctrl + f 慢慢找吧 顺便一提 ctrl + g 可以定位所在行数
说实话 这是最基本的了

一共就这些行数,哪有那么多行数
Logerlink 2018-06-04
  • 打赏
  • 举报
回复
第一张图 不是那样注释的 只需要将5131-5137行注释掉就可以了 缩小的话 在.inner .jiexibox 后面加上这个 transform: scale(0.8); 背景图 将5450行的#billboard{height: auto;}换成#billboard {/*height: auto;*/background:url(3.jpg) no-repeat 70% 0;background-size:320%;}
西門冠希 2018-06-04
  • 打赏
  • 举报
回复
引用 1 楼 Logerlink 的回复:
在@media only screen and (max-width:1024px) 区域中将5131-5137行注释掉
在@media only screen and (max-width:768px) 区域的最后面(5441行)加上 .inner .jiexibox{left:0;width:100%;}


非常感谢朋友的热心帮助。。再问下如何能缩小点比例呢,在手机端!还有PC端的背景如何在手机端也显示呢
西門冠希 2018-06-04
  • 打赏
  • 举报
回复
引用 1 楼 Logerlink 的回复:
在@media only screen and (max-width:1024px) 区域中将5131-5137行注释掉
在@media only screen and (max-width:768px) 区域的最后面(5441行)加上 .inner .jiexibox{left:0;width:100%;}


我是这样修改的。


Logerlink 2018-06-04
  • 打赏
  • 举报
回复
在@media only screen and (max-width:1024px) 区域中将5131-5137行注释掉 在@media only screen and (max-width:768px) 区域的最后面(5441行)加上 .inner .jiexibox{left:0;width:100%;}
EMlog博客古典式模板 v1.1 更新介绍 2014年8月15** 一、新增功能 1、侧边栏细节完善,增加了广告、微信等CSS样式,方便大家自定义。 2、添加了EM博客中最强、最完整的“网站统计”。 3、侧边栏添加了12个flash小动画、小宠物,让你有更多的选择。 4、侧边栏所有栏目边框鼠标停留样式。 5、添加了“微语”头像随机化10张图片。一共做了4套头像。男女都有,包括:古典帅气文人武将、现代高富帅、古代千金贵族美女、现代白富美。 6、底部“high一下”改成了网络调用音乐和本地CSS,修改footer.php可更换音乐地址,默认是“黑客帝国”的片头音乐,调用的是其他外链mp3网站。 二、修正地方 1、如果首页“文章标题”太长怎么办?还会导致变成两排的难看局面,于是我给“文章标题”加了文字溢出剪切功能,过长的文字统统剪切掉,永远是一排。 2、给内容页的“上一篇”、“下一篇”做了自适应处理,不管标题再怎么长,都会以省略号代替溢出文字。 3、修正了侧边栏“个人资料”头像宽高不均导致撑破边框问题。 4、修正首页、内容页底部“站长”在“微语页”不显示的问题,感谢“EM群”的“老独头”和“沉默着继续”的帮助。 5、修正“微语”页的回复错位的问题,添加了一些细致漂亮的鼠标停留样式。 6、修改了一些图标的颜色,以前的不好看。如:置顶、二级置顶等图标。 7、修改了首页“阅读全文”错位问题。 2014年8月8**: 1、更新了一些细节问题。 2、如果你在后台应用里安装本模板失败,可能是服务器限制的附件不能超过2M,而本模板有4.4M多,所以最好是把模板下载到本地,然后用FTP上传到模板文件夹里,再到后台模板去激活。 模板介绍 介绍:古典大气、响应式、智能化设计,兼容IE6-11和各种现代浏览器。在手机、**板、PC上都能完美显示。 支持EMlog版本:5.31 模板兼容:此模版兼容IE6、7、8、9和IE 内核的浏览器,并支持以下浏览器。 模版特色 一、响应式设计,兼容PC 手机。哪怕是在240×320的分辨率下效果也不错。 二、采用1200px宽度设计。抛弃N年前流行的960px设计,现在全球分辨率用的最多是1366、1440、1024、1920,所以我采用了前2种分辨率的中间宽度1200px,而1024下又是自适应宽度,所以不用担心1024。1200px阅读面积更宽,更大气。 三、纸质风格,良好阅读体验。博客正文默认采用16PX字体,阅读体验更加良好,字号有14px、16px、18px可供访客选择。背景为什么不用白色,白色黑字长久阅读会很累,白色是高光,反光度高,而用低光度的纸质背景对眼睛有适当的保护作用,长时间看不会觉得累。 四、网页元素都动起来。加载了国外高手制作的CSS3动画库,可以让网页任何元素都动起来,特别是文字。这样浏览者会发现你的网页比较有趣味,而且还能体现某些文字的重要性。 五、侧边栏美化。侧边栏用了黄金包边的宝石做标题,看起来更美观。默认宽度为276px,分辨率在小于880px时自动隐藏。 六、鼠标指针动静结合,组合丰富。在IE浏览器下鼠标指针是动态的ani,而在其他浏览器下鼠标指针则是静态的,指针样式都不一样。如果你看腻了这些鼠标指针,images里面还有2个备选的供你使用。 七、扩展性强,模板素材多多。设计本模版,光按钮和捐赠就设计了好多个,最终都没采用,以下是演示。 八、丰富多彩的顶部、底部横幅,全部随机显示。边欣赏博文,边欣赏世界名胜风景。每次打开网站都会给你带来新鲜的感觉。 九、双击网页空白区域自动滚屏。可以不用拉滚动条,让屏幕缓慢的滚动,慢慢阅读博文。 十、返回顶部不再单一。可以上、可以下。放在上下按钮上,屏幕自动滚屏。中间按钮点击一下滚动三分之一的屏幕,再点击一下再次滚动,不断点击可以快速浏览整个网站。進入内容也后,点击即可查看评论。 十一、JS控制GIF动画播放。如果你的页面GIF加载的太多,就可以用这个功能控制GIF不自动播放,点击再播放。 十二、在浏览器低于800分辨率下,顶部、底部横幅将不显示。在手机低分辨率下,页面的图标、按钮几乎和PC的显示有许多地方不一样。更干净、更容易操作、更方便。 一十三:视频、图片、框架都支持自适应,但必须按照模板使用文档的css格式来写,不然无效,具体看模板使用文档。 一十四:分享、版权信息、二维码地址都集成在模板中了,你无需安装插件,更省心。 一十五:自定义侧边栏的许多样式都是现成的,你只要复制、粘贴html代码在你的后台侧边栏就行了。去看看 一十六:使用本模板,你不再需要手机版本了。因为本模板是响应式设计的,既是手机版,也是**板、笔记本、PC版。
EMlog博客古典模板 更新日志: 1、移除侧边栏统计访问次数的功能,因为不准,时常会清零。 2、新增导航栏显示二级菜单功能,并把导航更改为汉堡模式,点击才出现。 3、公告栏和日志页标题下新增两个广告位,可以是任何类型广告。默认是一张图片占位的。 4、模板设置中新增PC端和手机端导航栏的手气不错关闭功能。 5、博客背景改为真善美三个字。 6、移除了捐赠功能,如需要请安装打赏插件即可。 7、新增手机端分享功能,PC端分享功能移动在文章结尾处。 8、移除底部随机图片,保留一张新增的荷花图片。 9、修正了一些细节。 EMlog博客古风大气模板简介 EMlog博客主题模板古风模板是一款高端大气、古典优雅的主题,采用html5 css3响应式、智能化设计,兼容IE8、9、10、11和各种现代浏览器。在手机、平板、PC上都能完美显示。官网不断更新,有更多横幅、图标和视频教程提供您下载。 EMlog博客古风大气模板运行环境: 1、基于emlog博客程序开发而成,使用前必先安装emlog博客程序。 2、安装完毕后,再上传博闻广记主题模板,然后安装“模板设置插件”方可使用。 EMlog博客古风大气模板全局功能: 1、31张顶部banner随机显示,都是本人精挑细选的美图,有风景、人文、CG等。 2、15张头像也是随机显示,在动态页面。 3、个性的鼠标样式,默认的是否看腻了? 4、侧边栏评论处头像也是随机显示的英雄人物。 5、5张底部大图随机显示。 6、侧边栏预设了优美动听的古风音乐,让你边阅读文章边陶醉不已。 EMlog博客古风大气模板其他功能: 一、响应式设计,兼容PC 手机。哪怕是在240×320的分辨率下效果也不错。 二、采用1200px宽度设计。抛弃N年前流行的960px设计,现在全球分辨率用的最多是1366、1440、1024、1920,所以我采用了前2种分辨率的中间宽度1200px,而1024下又是自适应宽度,所以不用担心1024。1200px阅读面积更宽,更大气。 三、纸质风格,良好阅读体验。博客正文默认采用16PX字体,阅读体验更加良好,字号有14px、16px、18px可供访客选择。背景为什么不用白色,白色黑字长久阅读会很累,白色是高光,反光度高,而用低光度的纸质背景对眼睛有适当的保护作用,长时间看不会觉得累。 四、网页元素都动起来。加载了国外高手制作的CSS3动画库,可以让网页任何元素都动起来,特别是文字。这样浏览者会发现你的网页比较有趣味,而且还能体现某些文字的重要性。 五、侧边栏美化。侧边栏用了黄金包边的宝石做标题,看起来更美观。默认宽度为276px,分辨率在小于880px时自动隐藏。 六、鼠标指针动静结合,组合丰富。在IE浏览器下鼠标指针是动态的ani,而在其他浏览器下鼠标指针则是静态的,指针样式都不一样。如果你看腻了这些鼠标指针,images里面还有2个备选的供你使用。 七、扩展性强,模板素材多多。设计本模版,光按钮和捐赠就设计了好多个,最终都没采用,以下是演示。 八、丰富多彩的顶部、底部横幅,全部随机显示。边欣赏博文,边欣赏世界名胜风景。每次打开网站都会给你带来新鲜的感觉。 九、双击网页空白区域自动滚屏。可以不用拉滚动条,让屏幕缓慢的滚动,慢慢阅读博文。 十、返回顶部不再单一。可以上、可以下。放在上下按钮上,屏幕自动滚屏。中间按钮点击一下滚动三分之一的屏幕,再点击一下再次滚动,不断点击可以快速浏览整个网站。進入内容也后,点击即可查看评论。 十一、JS控制GIF动画播放。如果你的页面GIF加载的太多,就可以用这个功能控制GIF不自动播放,点击再播放。 十二、在浏览器低于800分辨率下,顶部、底部横幅将不显示。在手机低分辨率下,页面的图标、按钮几乎和PC的显示有许多地方不一样。更干净、更容易操作、更方便。 一十三:视频、图片、框架都支持自适应,但必须按照模板使用文档的css格式来写,不然无效,具体看模板使用文档。 一十四:分享、版权信息、二维码地址都集成在模板中了,你无需安装插件,更省心。 一十五:自定义侧边栏的许多样式都是现成的,你只要复制、粘贴html代码在你的后台侧边栏就行了。去看看 一十六:使用本模板,你不再需要手机版本了。因为本模板是响应式设计的,既是手机版,也是平板、笔记本、PC版。 EMlog博客古风大气模板页面展示 相关阅读 同类推荐:站长常用源码
wordpress人文古风主题 更新日志: 1、更改日历旋转动画为更美观的。 2、移除底部随机图片,保留一张新增的荷花图片。 3、更改了背景的文字。 4、修正了PC端和手机端的分享功能,手机端可以分享了。 5、修改停留时间的显示样式。 6、一些细节的修改。 wordpress人文古风主题简介 博闻广记wordpress古风主题模板免费版是基于html5 css3制作的,她是一款高端大气、古典优雅的主题,采用响应式设计,两栏布局,上中下构造,兼容IE8、9、10、11和各种现代浏览器。她在手机、平板、PC上都有不错的显示效果,她还配有简单有趣的动画特效,让模板充满趣味。为了不单一,本人及网友还制作了多达百张的顶部banner、头像、图标素材提供您扩展使用。 如果你会网页技术,欢迎你進行二次、三次修改。模板虽然是免费的,但请保留我们的底部版权。你可以在“by 清萍剑客”后面加上你的大名。如果修改的不错也请发我邮件一份,为你推广。让我们把“博闻广记主题免费版”变得更好更美! wordpress人文古风主题运行环境与使用方法: 服务器环境要:PHP 5.2.4或更新版本,MySQL 5.0或更新版本。 1、本主题是基于wordpress系统开发,使用前必先安装wordpress。 2、安装完毕后,再上传博闻广记主题模板方可使用。 wordpress人文古风主题全局功能: 1、31张顶部banner随机显示,都是本人精挑细选的美图,有风景、人文、CG等。 2、个性的鼠标样式,默认的是否看腻了? 3、5张底部大图随机显示。 4、有趣的动画特效。 5、侧边栏预设了优美动听的古风音乐,让你边阅读文章边陶醉不已。 wordpress人文古风主题基本功能: 1、首页、日志页、单页都有,边栏小工具有。 2、边栏预设了虾米音乐。可在后台修改未网易云、百度、虾米等音乐。 3、底部友情链接,带站标功能。 4、公告功能,模板设置中添加修改。 5、文章列表滚动出场动画功能。 6、404动画功能。 wordpress人文古风主题其他功能: 一、响应式设计,兼容PC 手机。哪怕是在240×320的分辨率下效果也不错。 二、采用1200px宽度设计。抛弃N年前流行的960px设计,现在全球分辨率用的最多是1366、1440、1024、1920,所以我采用了前2种分辨率的中间宽度1200px,而1024下又是自适应宽度,所以不用担心1024。1200px阅读面积更宽,更大气。 三、纸质风格,良好阅读体验。博客正文默认采用16PX字体,阅读体验更加良好,字号有14px、16px、18px可供访客选择。背景为什么不用白色,白色黑字长久阅读会很累,白色是高光,反光度高,而用低光度的纸质背景对眼睛有适当的保护作用,长时间看不会觉得累。 四、网页元素都动起来。加载了国外高手制作的CSS3动画库,可以让网页任何元素都动起来,特别是文字。这样浏览者会发现你的网页比较有趣味,而且还能体现某些文字的重要性。 五、侧边栏美化。侧边栏用了黄金包边的宝石做标题,看起来更美观。默认宽度为276px,分辨率在小于880px时自动隐藏。 六、鼠标指针动静结合,组合丰富。在IE浏览器下鼠标指针是动态的ani,而在其他浏览器下鼠标指针则是静态的,指针样式都不一样。如果你看腻了这些鼠标指针,images里面还有2个备选的供你使用。 七、扩展性强,模板素材多多。设计本模版,光按钮和捐赠就设计了好多个,最终都没采用,以下是演示。 八、丰富多彩的顶部、底部横幅,全部随机显示。边欣赏博文,边欣赏世界名胜风景。每次打开网站都会给你带来新鲜的感觉。 九、双击网页空白区域自动滚屏。可以不用拉滚动条,让屏幕缓慢的滚动,慢慢阅读博文。 十、返回顶部不再单一。可以上、可以下。放在上下按钮上,屏幕自动滚屏。中间按钮点击一下滚动三分之一的屏幕,再点击一下再次滚动,不断点击可以快速浏览整个网站。進入内容也后,点击即可查看评论。 十一、JS控制GIF动画播放。如果你的页面GIF加载的太多,就可以用这个功能控制GIF不自动播放,点击再播放。 十二、在浏览器低于800分辨率下,顶部、底部横幅将不显示。在手机低分辨率下,页面的图标、按钮几乎和PC的显示有许多地方不一样。更干净、更容易操作、更方便。 一十三:视频、图片、框架都支持自适应,但必须按照模板使用文档的css格式来写,不然无效,具体看模板使用文档。 一十四:分享、版权信息、二维码地址都集成在模板中了,你无需安装插件,更省心。 一十五:自定义侧边栏的许多样式都是现成的,你只要复制、粘贴html代码在你的后台侧边栏就行了。去看看 一十六:使用本模板,你不再需要手机版本了。因为本模板是响应式设计的,既是手机版,也是平板、笔记本、PC版。 wordpress人文古风主题页面展示 相关阅读 同类推荐:站长常用源码

61,112

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧