首先是在最上方 加入一段 说明标题 比较好
<h3 style="padding-left: 10px;color: #353c48">项目列表:<span style="font-size: small;color: grey;">(这里显示全部项目,您可以进入他人的项目中查看)</span></h3>
效果如下:
然后我们美化一下这俩个按钮,我们可以在head中新建一个style,来控制全页面的按钮css样式。随便起了个.btn, 这样具体元素中就可以用class = "btn" 来套用这里的样式了。
然后我们试着在.btn{} 里添加一个 背景颜色。刷新看看页面俩个按钮肯定都变了:
然后我们试着在.btn{} 里添加一个 背景颜色。刷新看看页面俩个按钮肯定都变了:
这就是bootstrap3的标准默认空白按钮。当然我们可以改样式:
一个是常用的成功按钮,一个是常用的危险按钮。看看效果:
bootstrap3是一个方便的 css库 让我们可以直接简单的套用很多流行的样式。具体都有什么可以在这个网站找到:
本系列教程后续基本大部分样式都会采用bootstrap3的现成。这样可以有效降低难度,毕竟超级厉害的前端大神才会去硬写自己的风格的样式组建。我们当前任务是平台可用。
接下来我们要增加一个 增加项目的按钮:
先找好地方:我们可以把它放在页面底部 也可以放在顶部,也可以左上角。
我这里直接就放在 顶部中间了,位置要固定跟随屏幕滚动,这样当列表太多用户在滚动到下方时候,依然可以直接点击新增项目按钮。
既然是位置固定,就要脱离文档流,所以我们放在哪去写这个button都可以了。
代码如下:
<button style="border-left: 10px solid black;border-right: 10px solid black;border-top: 0; position: fixed;top: 0px;left: -webkit-calc(50% - 75px);width: 150px;height: 40px;font-size: x-large;background-color: white;color:black ; border-radius: 0px 0px 10px 10px;">新增项目</button>
样式较多,大家可以直接复制。
当然大家可以自行设计哈,毕竟我的设计被吐槽很多次了。
现在我们的页面 东西都全了.
下一节我们 的任务就是 让这三个按钮都发挥真正的作用:
新增/进入/删除