前端新手学习记录2 | 您所在的位置:网站首页 › 项目简介效果图模板怎么写 › 前端新手学习记录2 |
编写了一个网站首页,参照网上的例子。界面如下 代码如下:
弹性布局展示 * { box-sizing: border-box; } /* 设置 body 元素的样式 */
body { font-family: arial; margin: 0; } /* 标题 / LOGO */
.header { padding: 10px; text-align: center; background: #1abc9c; color: white; } /* 设置顶部导航栏样式 */
.navbar { display: flex; background-color: #333; } /* 设置导航条链接演示 */
.navbar a { color: white; padding: 14px 20px; text-decoration: none; text-align: center; } /* 更改鼠标悬停时的颜色 */
.navbar a:hover { background-color: #ddd; color: black; } /* 列容器 */
.row { display: flex; flex-wrap: wrap; } /* 创建并排的非等列 */ /* 侧栏 / 左侧列 */
.side { flex: 30%; background-color: white; padding: 20px; } /* 主列 */
.main { flex: 70%; background-color: white; padding: 20px; } /* 伪图像,仅供示例 */
.fakeimg { background-color: #aaa; width: 100%; padding: 20px; } /* 页脚 */
.footer { padding: 10px; text-align: center; background: #ddd; } /* 响应式布局 - 当屏幕小于 700 像素宽时,让两列堆叠而不是并排 */
@media screen and (max-width:700px) { .row, .navbar { flex-direction: column; } }
我的网站
拥有弹性布局,请调整浏览器窗口来查看相应效果
网站简介 重要信息 关于 联系方式
关于我 我的照片
图像
关于我的简介 More Text
更多的信息可以写到这里. 图像 图像 图像
标题 标题描述,2021 年 1 月 1 日 图像
一些文本..
关于图像的一些简介.
标题 标题描述,2021 年 1 月 2 日 图像
一些文本..
第二个图像的简介,可以当作新闻使用.第二个图像的简介,可以当作新闻使用.第二个图像的简介,可以当作新闻使用.
页脚
var app = Vue.createApp({ data() { return { message: 'yufuchang.com ' } }, template: "{{message}}" }) var vm = app.mount("#app")
|
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |