在给自己的小网站写样式。之前没接触过 CSS ,看了看书,开始动手写。结果到导航栏就卡住了。
根本不知怎么配色,便从 Bootstrap 的默认主题里选了一些。但然后,又开始纠结诸如:“这个组织名称和用户登录状态的文字要不要放进<nav>
?”“我想让那部分文字在右侧,用float: right
是一般做法吗?(见 V2EX 用的是一个<table>
)”之类的问题。(那本书中没有讲display: flex
,看上去很好,但是我担心有人用微信打开它,会有问题吧。)
并且,见许多示例都直接写width: ?px
。不是要响应式吗?如果是如max-width: 750px
这样的我还能理解,毕竟见过一行字占满整个屏幕宽度的网页。但直接指定宽度真的不会出问题?如果rem
大了,或者 viewport 奇怪一点,不就会……
这是现在的导航栏。还没考虑在移动设备上的效果
<header>
<span class="brand">Brand</span>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li class="active"><a href="/about/">About</a></li>
</ul>
</nav>
<div class="text"><a href="/login/">Login</a></div>
</header>
.brand {
font-size: 0.75em;
text-align: left;
}
nav{
display: inline-block;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
padding: 0.5em;
}
nav li.active {
background-color: white;
}
nav a {
font-size: 150%;
color: #777;
text-decoration: none;
}
header .text {
float: right;
padding: 0.5em;
}
我想先写好大概的样式,然后再去调整不同设备上的效果。然而,在登录页,我想让登陆按钮与上面的文本框右对齐,但是不是只能把<form>
放进一个指定了width
的<div>
,然后再text-align: right
?
有点想直接拿 Bootstrap 套上。但看着文档里那一堆嵌套的div
和class
,便有些退却了。想问问各位应该怎样开始。
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.