企业站项目页面布局(适应手机端)

最新推荐文章于 2022-03-28 09:58:26 发布
最新推荐文章于 2022-03-28 09:58:26 发布
阅读量191 收藏
点赞数
分类专栏： 学习地址 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42236746/article/details/112620702
版权

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./common.css">
</head>
<style>
	/*手机端*/
    @media (max-width:1200px) {
    
        html{
    
            width: 1300px;
        }
        /*看不清可以用边框*/
        .header{
    
            width: 1300px;
            height: 56px;
            background: #282633;
        }
        .header-c{
    
            width: 1215px;
            height: 56px;
            margin: auto;
        }
        .logo{
    
            margin-top: 4px;
            border-right: 1px solid floralwhite;
            padding-right: 40px;
        }
        .nav{
    
            margin-left: 76px;
        }
        .nav li{
    
            float: left;
            line-height: 56px;
            margin-right: 7px;
        }
        .nav li:hover{
    
            background:darkseagreen;
        }
        .nav a{
    
            color: #fff;
            display: block;
            padding:0 15px;
        }
        .login-btn,.register-btn{
    
            width: 60px;
            height: 26px;
            background: transparent;
            color: #fff;
            border: none;
            border-radius: 5px;
        }
        .login-btn{
    
            border: 1px solid cadetblue;
        }
        .register-btn{
    
            border: 1px solid greenyellow;
        }
        .login{
    
            margin-top: 13px;
        }
        .show-c{
    
            width: 1215px;
            height: 580px;
            margin: auto;
        }
        .show{
    
            height: 580px;
            width: 1300px;
            background: url(59.jpg)no-repeat center 0;
        }
        .show-intro{
    
            width: 360px;
            margin-top: 192px;
            margin-left: 122px;
        }
        .show-pic{
    
            margin-top: 90px;
            margin-right: 60px;
        }
        .show-title{
    
            font-size: 40px;
            color: greenyellow;
            font-weight: normal;
            margin-bottom: 44px;
        }
        .show-para{
    
            font-size: 20px;
            color:yellowgreen;
        }
        .spe{
    
            width: 1215px;
            height: 380px;
            margin: 0 45px;
        }
        .spe-li{
    
            width: 25%;
            text-align: center;
        }
        .spe-t2{
    
            padding: 0px 30px;
            font-size: 12px;
            margin-top: 14px;
        }
        .spe li img{
    
            margin-top: 60px;
            margin-bottom: 23px;
        }
        .apply{
    
            width: 1300px;
            height: 118px;
            background: #fafafa;
        }
        .apply-c{
    
            width: 1215px;
            height: 118px;
            margin: 50px auto;
        }
        .apply-t{
    
            font-size: 28px;
            text-align: center;
            padding-top: 24px;
        }
        .apply-li{
    
            padding: 0 50px;
            border-right: 1px solid #999;
            height: 34px;
            line-height: 34px;
        }
        .apply-li-last{
    
            border-right: none;
        }
        .apply-ul{
    
            margin: 18px 0 0 26px;
        }
        .apl{
    
            width: 1300px;
            background: #68ccaa;
            height: 520px;
        }
        .apl-c{
    
            height: 520px;
            width: 1215px;
            margin: auto;
        }
        .apl-left{
    
            color: #fff;
            margin-top: 134px;
            margin-left: 106px;
        }
        .apl-right {
    
            margin-top: 30px;
        }
        .apl-intr{
    
            font-size: 35px;
        }
        .apl-size1{
    
            margin-top: 10px;
        }
        .apl-size2{
    
            margin-top: 34px;
            margin-bottom: 10px;
        }
        .goods{
    
            width: 1300px;
            height: 810px;
            background: #fafafa;
        }
        .goods-c{
    
            height: 1030px;
            width: 1215px;
            margin: auto;
        }
        .goods-t{
    
            line-height: 116px;
            font-size: 28px;
            text-align: center;
        }
        .goods-li{
    
            width: 202px;
            float: left;
            margin: 0 10px;
            box-sizing: border-box;
        }
        .goods-p{
    
            font-size: 12px;
            line-height: 55px;
            text-align: center;
        }
        .goods-ul{
    
            padding: 0 50px;
            overflow: hidden;
        }
        .more{
    
            width: 164px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            border: 1px solid #999;
            border-radius: 6px;
            margin: auto;
        }
        .user{
    
            width: 1300px;
            height: 520px;
            margin: auto;
            text-align: center;
        }
        .user-t{
    
            font-size: 24px;
            line-height: 116px;
        }
        .footer{
    
            width: 1300px;
            height: 200px;
            background: #57586d;
        }
        .footer-c{
    
            width: 1215px;
            height: 200px;
最低0.47元/天 解锁文章
永恒之力
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html5手机端页面布局,移动端H5常见的布局方式有哪些
weixin_39880328的博客
06-07 2580
随着智能手机的普及以及社会的发展，传统的网站布局已经无法适应现状，我们编写的网页不仅仅要展示在电脑上， 也要展示在移动设备上，而移动设备种类繁多，苹果、小米、三星等等很不好适配移动端设备屏幕尺寸非常多，碎片化严重，Android和苹果设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等一般的电脑端的页面布局在手机上无法完全适应，那么如何让一...
php 适应手机端,4种移动端适配方法
weixin_42153691的博客
03-10 1371
1.@media screen实现网页布局的自适应优点 : 无需插件,能够适应各种窗口大小，只需在CSS中添加@media screen属性。官方文档：@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。语法：@media mediatype and|not|only (media feature) { CSS-Code; }/* ...
12套ASP企业网站源码 PC版+手机版（生动） 自动生成手机版 企业通用 带后台带数据
01-30
12套ASP企业网站源码 PC版+手机版（生动） 自动生成手机版 企业通用 带后台带数据
(自适应手机端)pbootcms响应式企业通用网站模板
a9490489的博客
03-28 1115
(自适应手机端)pbootcms响应式企业通用网站模板 HTML5企业展示型网站源码下载 PbootCMS内核开发的网站模板，该模板适用于企业通用网站、企业展示型网站等企业，当然其他行业也可以做，只需要把文字图片换成其他行业的即可； 自适应手机端，同一个后台，数据即时同步，简单适用！附带测试数据！ 友好的seo，所有页面均都能完全自定义标题/关键词/描述，PHP程序，安全、稳定、快速；用低成本获取源源不断订单！ 后台：域名/admin.php 账号：admin 密码：admin 使用教程：https.
各大著名公司移动端页面 - 导航的实现【学习点干货】
云上
07-12 1852
伴随着科技的发展，出现了各种型号的手机，导致了HTML5移动端开发人员对页面的实现要求更高了。目前来说，移动端的实现方法没有一个统一的标准，大家各自采用自己的实现方法，所以今天就给大家分享一下各大公司移动端页面的实现方法——导航栏 给大家分享之前，先说几句话。本文章主要给大家分享不同公司对移动端的实现采用了不同的方法。每一种方法各有各的好处，我们不能说哪一种方法好，哪一种方法不好。另外，这边
企业网站首页设计常见的6种布局方式
热门推荐
这个少女IT男的博客
11-15 2万+
转载自：http://www.wzsky.net/html/Website/Experience/120178.html 在群里和大家交流时，看到太多的网页设计师发布企业站的个人作品，设计中总是摆脱不了大框套小框的设计布局思路，不加思索的跳入单一的网页布局形式中，于是就有了把企业站常用的页面布局方式总结一下的想法，让大家包括我自己全面的了解一下企业站的常见布局方式，做到对此种类型的网站布局心中有
解决移动端，wap站，m站适配方案整理
xiexikk的博客
04-08 1900
概念：所谓移动端的适配，就是不同手机（屏幕尺寸/分辨率）上作等比例的缩放，给予用户更好的体验效果； 首先，经过这些年的工作经验，出现的一些关于移动端适配的技术方案： 框架式：Bootstrap，mui、amaze UI 等等… (代码量多，维护难，自定义开发麻烦，可用于后台管理/pc/简单式的网站) 比分比%或者flex，这个是根据手机大小进行百分比/flex缩放； （不够灵活，像素大小都是px...
html5手机端登录页面布局,浅析移动设备HTML5页面布局
weixin_39580042的博客
06-04 980
我们结合移动设备(手机和平板电脑)的特性，介绍HTML5中新增的语义化标签元素，以及在移动Web浏览器下Web页面布局的知识及例子。在HTML5标准添加的新元素中，用于常见页面结 构的包括header footer footer nav aside aside article section hgroup 。下面简单介绍一下这个元素：1.headerheader>元素定义文档的页面组合，通 ...
chrome浏览器调试手机端h5页面
铁柱的博客
12-27 2万+
这个是常识性的问题了。奈何我之前确实是不知道。只知道用F12来调试PC端的页面，这次经过同事指点，终于知道为啥人家在浏览器调试手机端页面，显示的大小都是手机端的。 步骤：1、打开F122、如果所示点击咱们平时寻找网页的DOM节点，都是用的第一个。 第二个就是专门用来调整手机端页面的。先点击这个按钮。3、选择适配的手机型号      按照2操作点击之后，我们可以看到这个界面。箭头的位置是一个下拉选
chrome手机端调试web页面(前端项目)
前端少年
04-24 8468
2018.04.24 # # 最近用 vue 做了一个 web 音乐 App, 想看看在手机端的样子。 因为之前都是使用草料二维码查看， 但是最近使用草料二维码的时候报错，页面显示不了。于是就想使用 chrome 真机调试 web 页面，发现手机端的页面还是显示不了。 于是就开启了一段填坑之路。 1.以下是手机端报错信息 采用 chrome 真机调试，使用 p...
前端网页学习12（设计优秀网页的三种布局方式）
qq_40551957的博客
02-04 1067
网页布局三种方式： 标准流 浮动 定位 标准流： 行内元素可以一行多个。 块级元素独占一行。 即每个元素都有自己的格式。 常用于从上到下布局。 浮动： 定义： 元素脱离原有的位置，处于更高的一个层次。 语法 选择器{float：属性值} none（默认）left。right 特点： 1. 脱标： 脱离标准位置，即原有位置会被未浮动的格子占据。 2. 并列： 多个盒子都设置了浮动，且顶端对齐，在同一行排列，直至到达容器改行边缘。 3. 行内块元素特性： 任何元素都可以浮动，浮动后的元素具有行内块元素特性。
Vue项目案例
搬砖中
12-30 2万+
路由：index.js import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import First from '../views/first.vue' Vue.use(VueRouter) const routes = [ { path: '/', component: First }, { path: '/about', ..
node服务端解决socket.io跨域问题(Access to XMLHttpRequest at ‘http://localhost/socket.io/?EIO=4)
搬砖中
01-06 3939
原先代码： var app = require('http').createServer(handler) var socketio = require('socket.io') var io = socketio(app) var fs = require('fs'); app.listen(80) //处理web服务器正常的请求 function handler(req,res) { fs.readFile(__dirname + '/index.html', function.
前端商城vue项目案例1
搬砖中
01-13 3411
views/home.vue <template> <div id="home" class="home"> <van-search v-model="value" placeholder="商品搜索 共239款好物" input-align="center"/> <van-swipe :autoplay="3000" style="width:100%;height:200px"> <van-swipe-item v..
登录注册流程图
搬砖中
04-12 2237
tp查询某个字段的值是否存在
搬砖中
05-18 1156
tp3.2.3 M(‘table’)->where([‘id’=>id])->where([‘field’=>[‘notin’,条件]])->select(); tp5.* Db::name(‘table’)->where(‘id’,$id)->where(‘field’,’notin’,条件)->select(); Db::name(‘table’)->where(‘id’,$id)->whereNotIn(‘field’,条件)->sel
vue聊天室案例
搬砖中
01-05 1153
路由：index.js import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' import Wechat from "../views/Wechat.vue"; const routes = [ { path: '/', component: Wechat }, { path: '/about', name: 'Abou..
vue样式组件库
搬砖中
01-11 1103
vant ,element ,mintui ,materia vue ui,ant ui,iconic,iconfont.cn火箭
Socket.io.js
搬砖中
01-07 1089
百度socketio进入官网 Socket动态的实时的 引入socket.io.js在介绍->来源->socket.io/client-dist/socket.io.js vue下安装:npm install --save socket.io
vue 适应pc 手机端
最新发布
08-22
Vue 是一个非常灵活的前端开发框架，可以轻松适应 PC 端和手机端的需求。下面是一些适配 PC 和手机端的建议： 1. 响应式布局：使用 CSS 媒体查询和 Flexbox/Grid 等技术，使页面在不同屏幕尺寸下能够自适应布局。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值