生活咨询网开发

最新推荐文章于 2024-08-15 10:47:57 发布

lskaixin

最新推荐文章于 2024-08-15 10:47:57 发布

阅读量112

点赞数 2

文章标签： html5 html css

本文链接：https://blog.csdn.net/ls08250907/article/details/120488734

版权

文章目录

一、开发要求
二、项目介绍（本人选择的是Bootstrap+响应式布局）
三、业务架构
四、系统设计（在此展示首页的效果和思路）
五、遇到的问题

一、开发要求

本网站的开发是基于移动Web技术学习的开发任务。在开发时请结合移动Web开发的技术进行网页开发。可进行的技术选型有：

流式布局（百分比布局）
flex布局（伸缩盒布局）
rem适配布局（rem单位+媒体查询+less 或 flexible.js+rem单位）
响应式布局(纯响应式布局)
Bootstrap+响应式布局（推荐使用）

在这里插入图片描述

二、项目介绍（本人选择的是Bootstrap+响应式布局）

生活资讯网是一款发布生活资讯新闻的网站。主要为人们提供各类生活资讯，如饮食健康、生活常识、美容养生等全面广阔的内容，本站可以让您能轻易找到您想要的各类生活知识。

三、业务架构

在这里插入图片描述

四、系统设计（在此展示首页的效果和思路）

4.1首页

4.1.1效果

在这里插入图片描述

4.1.2效果

在这里插入图片描述

4.2思路

首先当我们拿到需要开发的项目时，除了要进行需求分析，还要思考每一个页面完成的流程。当我们制作多个类似页面且需要照顾兼容性时，一定要先把某个页面完成之后再开始下个页面
然后使用bootstrap栅格系统，把页面划分为行列，确定好每行每列在不同屏幕下占据的份数，该隐藏的隐藏，该显示的显示
文字，颜色等内容的样式则使用媒体查询去调整

五、遇到的问题

1. 背景渐变background-image

加粗样式线性渐变linear-gradient

改变方向：linear-gradient（to 方向，颜色）
角度：linear-gradient（角度deg,颜色）
透明度：linear-gradient（rgba(颜色，透明度)，rgba(颜色，透明度)）
像素：linear-gradient（颜色像素，颜色像素）
可平铺的线性渐变：repeating-linear-gradient

径向渐变radial-gradient

background-image：radial-gradient(大小 at 位置，颜色位置)
由中心向四周扩散
radial-gradient（扩散距离，颜色）
中心点：radial-gradient（at 0 0，颜色）

渐变虽然是一种颜色，但他的特质属于一种图片

例如：

  background: linear-gradient(180deg , rgba(0,0,0,.01) 2%, rgba(0,0,0,.95) 100%);

在这里插入图片描述

2. hover用法

想要在父元素添加hover，在指定的子元素实现效果
子元素应该写在hover后面空格隔开

<style>
    li{
         width: 100px;
         height: 100px;
         border:1px solid #000;
         transition:transfrom 2s linear;
      }
      ul:hover .one{     // 子元素写在hover后面空格隔开
         transform:rotateY(90deg);
      }
      ul:hover .two{
         transform:rotateY(0deg);
      }
      ul:hover .thr{
         transform:rotateY(360deg);
      }
</style>
<body>
    <div style="width: 300px;height : 300px; background-color:#ccc"></div>
     <ul>
          <li class="one">di1ge</li>
          <li class="two">di2ge</li>
          <li class="thr">di3ge</li>
     </ul>
</body>

⚠️注意：仅可以给自身的子元素设置样式，给其他元素子元素设置无效

在这里插入图片描述

3.flex

1.flex-basis规定子元素基准值

如果元素不是弹性盒对象的元素，则 flex-basis 属性不起作用
flex-basis的优先级比width高，如果元素上同时设置了width 和flex-basis，那么width 的值就会被flex-basis覆盖掉。
flex-basis 用于设置子项的占用空间。如果设置了值，则子项占用的空间为设置的值；如果没设置或者为 auto，那子项的空间为width/height 的值。

2.flex-grow剩余空间仍有富于空间的时候分配

默认值为0
数值为占比
小数：总数小于1，就不会把所有剩余空间分配完

3.flex-shrink在空间不够时让各个子元素收缩

在空间不够时让各个子元素压缩以适应有限的空间。
默认值为1：压缩
值为0：不压缩

在这里插入图片描述

lskaixin

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
生活咨询网开发

生活咨询网开发思路文章目录生活咨询网开发思路一、开发要求二、项目介绍（本人选择的是Bootstrap+响应式布局）三、业务架构四、系统设计（在此展示首页的效果和思路）4.1首页4.1.1效果4.1.2效果4.2思路五、遇到的问题1. 背景渐变background-image2. hover用法3.flex一、开发要求本网站的开发是基于移动Web技术学习的开发任务。在开发时请结合移动Web开发的技术进行网页开发。可进行的技术选型有：流式布局（百分比布局）flex布局（伸缩盒布局）rem适配布局（
复制链接

扫一扫