first commit

历届学生/韩想/项目开发/练习项目/静态页面作业/韩想/PC端/css/clear.css

@@ -0,0 +1,16 @@
+/* 专门用来重置浏览器默认样式的 */
+body, p,ul,li,h1,h2,h3,h4,h5,h6,input{
+    margin: 0;
+    padding: 0;
+}
+
+input {
+    outline: none;
+}
+li {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+}

历届学生/韩想/项目开发/练习项目/静态页面作业/韩想/PC端/css/public.css

@@ -0,0 +1,16 @@
+/* 存放公共css的 */
+.theme_red {
+    color: blue;
+}
+
+.left {
+    float: left;
+}
+
+.right {
+    float: right;
+}
+
+.p_14 {
+    padding: 0 14px;
+}

历届学生/韩想/项目开发/练习项目/静态页面作业/韩想/移动端/css/clear.css

@@ -0,0 +1,16 @@
+/* 专门用来重置浏览器默认样式的 */
+body, p,ul,li,h1,h2,h3,h4,h5,h6,input{
+    margin: 0;
+    padding: 0;
+}
+
+input {
+    outline: none;
+}
+li {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+}

历届学生/韩想/项目开发/练习项目/静态页面作业/韩想/移动端/css/index.css

@@ -0,0 +1,386 @@
+.sousuo{
+    width: 22rem;
+	height: 1.475rem;
+	background-color: #eeeeee;
+    border-radius: 0.725rem;
+	font-family: PingFang-SC-Medium;
+	font-size: 0.634rem;
+	line-height: 1.475rem;
+	letter-spacing: 0.033rem;
+    color: #999999;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    margin: 0 auto;
+    margin-left: 0.225rem;
+}
+.head_shang{
+    margin-top: 0.9rem;
+    width: 22rem;
+    margin: 0 auto;
+}
+
+.sousuo img{
+    width: 0.575rem;
+    height: 0.575rem;
+    margin-left: 0.675rem;
+    vertical-align: middle
+}
+ .zhuanjia img{
+    width: 22rem;
+    height: 9rem;
+    padding-left: 0.5em;
+    padding-right: 0.5rem;
+}
+.zhuanjia{
+    width: 23rem;
+     margin: 0 auto; 
+}
+.jiankang img{
+    width: 10rem;
+    height: 6rem;
+    margin-left: 0.8rem;
+    padding-right: 0.5rem;
+}
+.jiankang{
+    width: 23rem;
+   display: flex;
+    justify-content: space-between;
+    margin: 0 auto;
+}
+.zhuanjia{
+    margin: 0 auto;
+    width: 22.5rem;
+    margin-top: 1rem;
+}
+
+.zhengxing{
+    width: 23rem;
+    margin: 0 auto;
+    margin-top: 1rem;
+}
+.zhengxing img{
+    width: 22rem;
+    height: 7rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem ;
+    
+}
+.huizhen span{
+	font-family: STHupo;
+	font-size: 1rem;
+	font-weight: normal;
+	font-style: italic;
+	font-stretch: normal;
+	line-height: 2rem;
+	letter-spacing: 0rem;
+	color: #0ecfea;
+}
+.huizhen{
+    width: 23rem;
+    display: flex;
+    margin: 0 auto;
+}
+ 
+.huizhen_content{
+    display: flex;
+    width: 22rem;
+    justify-content: space-around;
+    margin-bottom: 1rem;
+    margin: 0 auto;
+    margin-left: 0.5rem;
+}
+.huizhen_content img{
+    width: 3rem;
+    height: 3rem;
+    margin-left: 0.5rem;
+}
+.huizhen_content .p{
+    width: 3rem;
+	height: 1rem;
+	font-family: PingFang-SC-Medium;
+	font-size: 1rem;
+	font-weight: normal;
+	font-stretch: normal;
+	line-height: 2rem;
+	letter-spacing: 0rem;
+	color: #333333;
+}
+
+.huizhen_title img:first-child{
+        width: 5rem;
+        margin-bottom: 0.5rem;
+}
+
+.huizhen_title img:nth-child(2),.huizhen_title img:nth-child(4){
+    width: 1rem;
+    height: 1rem;
+}
+.huizhen_title img:last-child{
+    width: 5rem;
+}
+ .content_health p1{
+	height: 1rem;
+	font-family: SourceHanSansCN-Regular;
+	font-size: 1rem;
+	font-weight: normal;
+	font-stretch: normal;
+	line-height: 2rem;
+	letter-spacing: 0rem;
+    color: #969696;
+    margin-left: 7.3rem;
+} 
+/* .fuli p1{
+    text-align: center;
+} */
+.huizhen_title{
+    margin-left: 2.5rem;
+}
+.tijian{
+    display: flex;
+    justify-content: space-between;
+    width: 22rem;
+    margin: 0 auto;
+    margin-left: 0.5rem;
+}
+.tijian img{
+    width: 10rem;
+    height: 5rem;
+}
+
+.hos_title{
+    display: flex;
+    justify-content: space-between;
+    width: 22rem;
+    margin: 0 auto;
+}
+.hos_title span{
+	font-family: PingFang-SC-Bold;
+	font-size: 1rem;
+	font-weight: normal;
+	font-stretch: normal;
+	line-height: 1rem;
+	letter-spacing: 0rem;
+    color: #333333;
+    margin-left: 0.5rem;
+    
+}
+.hos_title a{
+	font-family: PingFang-SC-Medium;
+	font-size: 1rem;
+	font-weight: normal;
+	font-stretch: normal;
+	line-height: 1rem;
+	letter-spacing: 0rem;
+    color: #999999;
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+}
+.hos_list{
+    overflow-x: scroll;
+    width: 22rem;
+    margin: 0 auto;
+}
+.hos_list ul{
+    display: flex;
+}
+.hos_list ul .act{
+    height: 1.25rem;
+    background-color: #dfeafe;
+    color: #4081f9;
+}
+.hos_list ul li{
+    height: 1.25rem;
+    width: 4.725rem;
+    text-align: center;
+    line-height: 1.25rem;
+	background-color: #f5f5f5;
+    border-radius: 0.611rem;
+	font-family: PingFang-SC-Medium;
+	font-size: 0.62rem;
+	letter-spacing: 0.03rem;
+    color: #666666;
+    margin-right: 0.425rem
+}
+.hos_content_list{
+    margin-left: 1rem;
+}
+.list_left img{
+    width: 5rem;
+    height: 4rem;
+}
+.comment img{
+    width: 4rem;
+	height: 1rem;
+}
+.comment .span{
+    width: 3rem;
+	height: 1rem;
+	font-family: PingFang-SC-Medium;
+	font-size: 1rem;
+	font-weight: normal;
+	font-stretch: normal;
+	line-height: 2rem;
+	letter-spacing: 0rem;
+	color: #999999;
+}
+.xiaoshou{
+    display: flex;
+}
+.hos_content_list{
+    display: flex;
+    margin-top: 1rem;
+}
+.list_right{
+    margin-left: 1rem;
+}
+.footer {
+    position: fixed;
+    width: 100%;
+    height: 50px;
+    background: #fff;
+    display: flex;
+    justify-content: space-around;
+    bottom: 0;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px -2px 4px;
+    align-items: center;
+}
+.footer_item {
+    text-align: center;
+}
+.footer_item i{
+    font-size: 18px;
+}
+.footer_item p{
+    font-size: 12px;
+    color: #8e8e93;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

历届学生/韩想/项目开发/练习项目/静态页面作业/韩想/移动端/css/public.css

@@ -0,0 +1,16 @@
+/* 存放公共css的 */
+.theme_red {
+    color: blue;
+}
+
+.left {
+    float: left;
+}
+
+.right {
+    float: right;
+}
+
+.p_14 {
+    padding: 0 14px;
+}

历届学生/韩想/项目开发/练习项目/静态页面作业/韩想/移动端/index.html

@@ -0,0 +1,260 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>移动端</title>
+    <link rel="stylesheet" href="./css/clear.css">
+    <link rel="stylesheet" href="./css/public.css">
+    <link rel="stylesheet" href="./css/index.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1995569_3pkdv3cihgm.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1995569_cu0qpjf9y8d.css">
+
+    <style>
+        html {
+            font-size: 20px;
+        }
+
+        @media only screen and (min-width: 400px) {
+            html {
+                font-size: 21.33333333px !important;
+            }
+        }
+
+        @media only screen and (min-width: 414px) {
+            html {
+                font-size: 22.08px !important;
+            }
+        }
+
+        @media only screen and (min-width: 480px) {
+            html {
+                font-size: 25.6px !important;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="head">
+        <div class="head_shang">
+            <div class="sousuo">
+                <img src="./image/3.png" alt="">
+                输入搜索内容
+            </div>
+        </div>
+        <div class="head_xia">
+            <div class="zhuanjia">
+                <img src="./img/立即预订.png" alt="">
+            </div>
+            <div class="jiankang">
+                <img src="./img/33.png" alt="">
+                <img src="./img/家庭医生_营养顾问.png" alt="">
+            </div>
+
+        </div>
+    </div>
+    <div class="content">
+        <div class="content_health">
+            <div class="huizhen">
+                <div class="huizhen_title">
+                    <img src="./img/形状3拷贝.png" alt="">
+                    <img src="./img/矩形14拷贝.png" alt="">
+                    <span>健康服务</span>
+                    <img src="./img/矩形14拷贝.png" alt="">
+                    <img src="/img/形状3拷贝.png" alt="">
+                </div>
+            </div>
+            <p1>您所得的福利保障</p1>
+            <div class="huizhen_content">
+                <ul>
+                    <li>
+                        <img src="./img/医生.png" alt="">
+                        <p>西医会诊</p>
+                    </li>
+                </ul>
+                <ul>
+                    <li>
+                        <img src="./img/医生.png" alt="">
+                        <p>西医会诊</p>
+                    </li>
+                </ul>
+                <ul>
+                    <li>
+                        <img src="./img/医生.png" alt="">
+                        <p>西医会诊</p>
+                    </li>
+                </ul>
+                <ul>
+                    <li>
+                        <img src="./img/医生.png" alt="">
+                        <p>西医会诊</p>
+                    </li>
+                </ul>
+
+            </div>
+            <div class="tijian">
+                <img src="./img/组34拷贝.png" alt="">
+                <img src="./img/组34拷贝.png" alt="">
+            </div>
+        </div>
+
+        <div class="meirong">
+            <div class="tijian"></div>
+            <div class="zhengxing">
+                <img src="./img/42.png" alt="">
+            </div>
+        </div>
+        <div class="hospital">
+            <div class="hos_title">
+                <span>
+                    附近医院
+                </span>
+                <a href="">查看更多</a>
+            </div>
+            <div class="hos_list">
+                <ul>
+                    <a href="">
+                        <li class="act">全部</li>
+                    </a>
+                    <a href="">
+                        <li>妇产医院</li>
+                    </a>
+                    <a href="">
+                        <li>妇产医院</li>
+                    </a>
+                    <a href="">
+                        <li>妇产医院</li>
+                    </a>
+                    <a href="">
+                        <li>妇产医院</li>
+                    </a>
+                    <a href="">
+                        <li>妇产医院</li>
+                    </a>
+                </ul>
+            </div>
+            <div class="hos_content">
+                <div class="hos_content_list">
+                    <div class="list_left">
+                        <img src="./img/2.png" alt="">
+                    </div>
+                    <div class="list_right">
+                        <div class="address">安徽中山医院</div>
+                        <div class="comment">
+                            <img src="./img/xingxing.png" alt="">
+                            <span>5.0评分&nbsp;&nbsp;月售586</span>
+                        </div>
+                        <div class="tjjg">
+                            <span>体检:</span><i class="iconfont icon-renminbi1"></i><span>752起</span>
+
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="hos_content">
+                <div class="hos_content_list">
+                    <div class="list_left">
+                        <img src="./img/2.png" alt="">
+                    </div>
+                    <div class="list_right">
+                        <div class="address">安徽中山医院</div>
+                        <div class="comment">
+                            <img src="./img/xingxing.png" alt="">
+                            <span>5.0评分&nbsp;&nbsp;月售586</span>
+                        </div>
+                        <div class="tjjg">
+                            <span>体检:</span><i class="iconfont icon-renminbi1"></i><span>752起</span>
+
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="hos_content">
+                <div class="hos_content_list">
+                    <div class="list_left">
+                        <img src="./img/2.png" alt="">
+                    </div>
+                    <div class="list_right">
+                        <div class="address">安徽中山医院</div>
+                        <div class="comment">
+                            <img src="./img/xingxing.png" alt="">
+                            <span>5.0评分&nbsp;&nbsp;月售586</span>
+                        </div>
+                        <div class="tjjg">
+                            <span>体检:</span><i class="iconfont icon-renminbi1"></i><span>752起</span>
+
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="hos_content">
+                <div class="hos_content_list">
+                    <div class="list_left">
+                        <img src="./img/2.png" alt="">
+                    </div>
+                    <div class="list_right">
+                        <div class="address">安徽中山医院</div>
+                        <div class="comment">
+                            <img src="./img/xingxing.png" alt="">
+                            <span>5.0评分&nbsp;&nbsp;月售586</span>
+                        </div>
+                        <div class="tjjg">
+                            <span>体检:</span><i class="iconfont icon-renminbi1"></i><span>752起</span>
+
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="hos_content">
+                <div class="hos_content_list">
+                    <div class="list_left">
+                        <img src="./img/2.png" alt="">
+                    </div>
+                    <div class="list_right">
+                        <div class="address">安徽中山医院</div>
+                        <div class="comment">
+                            <img src="./img/xingxing.png" alt="">
+                            <span>5.0评分&nbsp;&nbsp;月售586</span>
+                        </div>
+                        <div class="tjjg">
+                            <span>体检:</span><i class="iconfont icon-renminbi1"></i><span>752起</span>
+
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <div class="footer">
+        <div class="footer_item">
+            <i class="iconfont icon-shouye"></i>
+            <p>首页</p>
+        </div>
+        <div class="footer_item">
+            <i class="iconfont icon-shouye"></i>
+            <p>健康管理</p>
+        </div>
+        <div class="footer_item">
+            <i class="iconfont icon-shouye"></i>
+            <p>商城</p>
+        </div>
+        <div class="footer_item">
+            <i class="iconfont icon-shouye"></i>
+            <p>订单</p>
+        </div>
+        <div class="footer_item">
+            <i class="iconfont icon-shouye"></i>
+            <p>我的</p>
+        </div>
+    </div>
+</body>
+
+</html>