坪山网站建设哪家便宜,系部网站建设研究方案,常见的简单的设计云平台,网站外链怎么做注#xff1a;iVX也有免费直播课《第八期直播课》
一、首页制作
首页预览如下#xff1a;
首先在博客页创建一个相对应项目#xff1a; 接着选择前台#xff0c;创建一个页面#xff0c;命名为首页#xff1a; 接着更改当前屏幕为小屏尺寸#xff1a;
接着我们分…注iVX也有免费直播课《第八期直播课》
一、首页制作
首页预览如下
首先在博客页创建一个相对应项目 接着选择前台创建一个页面命名为首页 接着更改当前屏幕为小屏尺寸
接着我们分析这个标题头部分为左右两侧左边为一个logo红色区域右侧为一个头像区域 那么此时创建一个行命名为标题在这个行内创建两个行一个命名为左一个命名为右 在此需要设置左右两行的高度为包裹并且为了使者两行能够同时在一行上显示每行的宽度还需要更改为 50% 那么此时最外层的标题行再设置一个高度为 50 px 即可 此时为了使标题头部内的元素距离上下左右有一定的距离那么直接设置标题行的内边距有一定值即可 接着往左侧行添加一个 logo设置大小和背景色 再添加一个文本输入框 接下来还需要左右两行都设置高度为撑开并且使其垂直居中否者垂直方向不会对其 最后再往右侧添加一个图片设置其大小圆角即可
二、内容设置
由于我们的页面还需要显示在PC端那么此时我们还需要添加一个行命名为主要内容设置主要内容的宽度为60%这样整个页面才能更好的显示在 PC 端否则内容太宽不利于用户使用 接着把整个标题放入主要内容之中此时即可完成如下效果 居中显示是因为整个页面设置了水平居中这个一定要注意整个主要内容行的高度也要设置为撑开
三、导航内容制作
接下来开始制作导航框 导航框的内容其实为一个行其中文本设置内边距即可有了距离首先添加一个行命名为导航 接着设置该行的高度为包裹还需要设置裁剪x 横轴并且隐藏滚动条 因为当页面缩小后当前页面若不使用x方向滚动那么导航内容将会换行在此设置了裁剪为 x 轴后则不会并且隐藏滚动条更加美观。
接着添加多个文本设置内边距即可 要实现这一步还需要使导航的自动换行关闭
三、导航内容制作
广告区域就很简单了设置一个行命名为广告给予高度后添加轮播组件即可 轮播组件在扩展组件中
四、内容区域创建
接着创建一个内容区域命名为博文内容 博文内容需要使用裁剪垂直方向因为内容过多时可以使整个区域发生拖动效果并且高度需要设置为撑开
接着添加一个行命名为内容用于存放文章信息设置其内边距使其内容距离边缘有一定距离 接着创建一个文本设置内容宽度和最大行号不设置内容宽度会自动使内容超范围显示 最后再添加一个行命名为阅读内容创建两个文本即可完成首页内容的制作
