CSS常见问题

麦田3年前 (2019-03-31)工作笔记184

我在使用CSS中遇到的一些问题,记录如下:


1、text-align:center无效,不居中


解决:如果不是文字,还得加上


margin:auto;

width:100%;

max-width:400px;(以自适应化代码为例,也可以直接使用width:400px;)


2、li不对齐,加入:margin:0即可


3、li宽度自适应:


电脑展示多列,手机浏览宽度不够,自动换到下一行(参考网海拾贝)


一种是文字不限制宽度:


.linkbox ul{width:100%;}

.linkbox ul li{

float:left;

border:1px solid #DBDBDB;

text-align:center;

line-height: 200%;

list-style:none;

margin:5px 10px 5px 0;

}


一种是文字长度等宽:


.linkbox { float:left; width:100%;}

.linkbox li{width:180px;

/* 总宽度960px,超过180px,手机浏览一个li一行。如果设置20%,手机浏览五个一行,过密 */ 

height:40px;

line-height:40px;

float:left;/* 必要 */ 

text-align:left;

overflow:hidden;}


4、CSS代码制作跟随滚动的顶部导航栏


要求:顶部只有一个且只需要移动一个导航栏


实现思路:  给导航栏添加固定定位(fixed),这时候脱离了标准流浮动起来了;


问题:  底下的盒子会往上跑占据导航栏原来的位置


解决办法:  给导航栏下面的盒子添加顶部内边距(padding-top),值等于导航栏的高度。


.top-nav {

/*顶部导航栏*/

background: rgba(244, 245, 246, .95);

position: fixed;/*这里是关键*/

width: 100%;

height: 100px;

z-index: 10;}

.banner {

/*滚动广告幅*/

padding-top: 100px;

margin: 0 auto;

width: 1920px;

height: 711px;

position: relative;}


5、电脑端的浏览器缩小到最窄,可以预览网页在手机上的效果。


如果发现哪些元素需要修改,却找不到,可以使用火狐浏览器+Firebug来定位div,再修改。


6、为什么dw打开显示的效果和浏览器打开不同?


原因之一:


这样写dw不能正常显示:<footer><p>麦田</p></footer>


这样写dw正常显示:<div class="footer"><p>麦田</p></div>


7、li前面的实心圆超出边框


解决:对 ul 加个padding-left: 10px;


8、普通<span style="color:#6C0">一段话中某些字体颜色不同</span>颜色


普通<span class="red">其他颜色的字</span>颜色

.red{ color:#F00}


9、少数内容链接使用特殊的css


html部分:<p class="big"><a href="com/" >商城</a></p>


css部分:


.big a:link{

font-size: 22px;

text-decoration:none;

color:#FF6A6A;

line-height: 200%;

target:new front;

}

.big a:hover{

font-size: 22px;

text-decoration:underline;

color:#FF6A6A;


如果是<a href="com/" class="abig" >商城</a>,css部分就要去掉big后面的a字母

相关文章

点击链接打开随机页面的代码

常规的HTML页面,点击链接、图片或者页码到下一页,比较沉闷,点击链接打开随机页面就不同。经过搜索和测试,以下代码可以用,而且很好用:<a href="#" onclick=...

分割线样式参考

分割线在网页中应用比较多,列举常规的分割线如下:1、最基础的分割线:<hr>或者<hr />,默认颜色是#9A9A9A,默认厚度是22、基础分割线:# 位置可选左右中,可选线条...

Hugo生成静态网页有大量空行怎么办

Hugo生成静态网页后,查看HTML网页源代码发现,里面有大量的空行,虽然前台显示正常,但是这些空行都应该被消灭掉!据说,不只是Hugo,Jekyell默认情况下也有同样的现象。这个问题一般是因为空元...

CSS3利用linth-child(n)实现隔几行设置元素

hugo主题ivy首页就是全部文章列表,如果文章过多,一眼看去会视觉疲劳。虽然可以设置分页,但是我忽然想:能不能设置每隔10个li就写个标记,比如不同的颜色或者分割线来减少视觉疲劳!通过谷歌搜索找到答...

DIVCSS的class和id的区别

网页中,常见的是div class,有时也有div id,这两者有什么区别呢?<div class="wrap">,对应的是.wrap<div id="...

ZBlog主题自适应简单笔记优化

1、手机端网页导航菜单,由三个横线隐藏,需要点击显示首页和导航链接。这虽然是常规操作,但是我不喜欢,我更喜欢像电脑端那样直接显示出来,这么宽的导航栏又不是放不下几个字。为此,我去掉header.php...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。