整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
茅臺集網頁設計要是用HTML DIV+CSS JS等來完成頁面的排版設計。
網頁有搜素框 導航欄 js圖片輪播；
網頁由網站首頁，公司簡介，公司發展歷程，最新新聞動態組成；
具體效果圖展示：
采用html5+css3+Zepto+swiper+wcPop+flex等技術開發的聊天實例。實現發送消息/表情，圖片/視頻預覽，添加好友/群聊，語音模塊，地圖定位模塊，整體功能界面效果類似微信聊天。
使用技術
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
Flex | Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。
https://www.runoob.com/w3cnote/flex-grammar.html2009年，W3C提出了一種新的方案—-Flex布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支持，這意味著，現在就能很安全地使用這項功能。Flex 布局將成為未來布局的首選方案。
采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。
如上圖：容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）
想要了解Flex布局更多的用法，可以去網上查閱相關資料，這里不作詳細概述了。
mescroll | 精致的下拉刷新和上拉加載 js框架.支持vue,完美運行于移動端和主流PC瀏覽器。
http://www.mescroll.com/https://github.com/mescroll/mescroll注意：如果你是uni-app開發者，下面是mescroll的uniapp版本
http://www.mescroll.com/uni.htmlwcpop是一個手機端彈窗插件，提供了多種類型的彈窗功能，有ios、android彈窗效果
// 基本使用
wcPop({
//傳入參數
})如上圖 彈窗菜單，使用下面代碼即可實現
$("#J_chatList").on("contextmenu", ".item", function (e) {
e.preventDefault();
//獲取長按坐標點
var _points = [e.pageX, e.pageY];
wcPop({
skin: 'contextmenu',
follow: _points,
opacity: 0,
btns: [
{
text: '發送給朋友',
style: 'color:#212121;',
onTap() {...}
},
{text: '復制'},
{text: '收藏'},
{text: '撤回'},
{text: '刪除'},
]
});
});function wchat_ToBottom() {
$(".mescroll").animate({ scrollTop: $("#J__chatMsgList").height() }, 0);
}// 定義最后光標位置
var _lastRange = null, _sel = window.getSelection && window.getSelection();
var _rng = {
getRange: function () {
if (_sel && _sel.rangeCount > 0) {
return _sel.getRangeAt(0);
}
},
addRange: function () {
if (_lastRange) {
_sel.removeAllRanges();
_sel.addRange(_lastRange);
}
}
}
// 聊天插入表情
$("#J__swiperEmotion").on("click", ".face_item", function () {
var that = $(this), range;
var img = that[0].cloneNode(true);
if (!_editor.childNodes.length) {
_editor.focus();
}
_editor.blur(); //輸入表情時禁止輸入法
setTimeout(function () {
if (document.selection && document.selection.createRange) {
document.selection.createRange().pasteHTML(img);
} else if (window.getSelection && window.getSelection().getRangeAt) {
range = _rng.getRange();
range.insertNode(img);
range.collapse(false);
//記錄當前光標位置 (否則光標會跑到表情前面)
_lastRange = range;
_rng.addRange();
}
}, 10);
});function isEmpty() {
var html = $editor.html();
html = html.replace(/<br[\s\/]{0,2}>/ig, "\r\n");
html = html.replace(/<[^img].*?>/ig, "");
html = html.replace(/ /ig, "");
return html.replace(/\r\n|\n|\r/, "").replace(/(?:^[ \t\n\r]+)|(?:[ \t\n\r]+$)/g, "") == "";
}?? 最后
如果你覺得這篇文章對你有幫助，麻煩點個「關注/轉發」，讓更多的人也能看到你的分享！
篇文章主要給大家介紹一下如何使用html+css來制作百度首頁頁面。
我們首先來分析一下百度首頁的頁面效果圖
百度首頁由頭部的一個文字導航，中間的一個按鈕和一個輸入框以及下邊的文字簡介和導航組成。
我們這里主要用到的知識點就是列表標簽（ul）的使用、浮動（float）的使用以及輸入框（input）的樣式控制。
1、列表標簽ul（頭部和底部的文字鏈接導航都有相同的顏色大小以及間距，我們可以使用ul和li來表示每個對應的文字導航）；
2、浮動元素float（每個li元素我們需要使用float:left;讓其左對齊，中間的兩個input我們需要使用float:left;來讓其左對齊，這里涉及到了我們之前講解的如何清除浮動的影響）；
3、輸入框input（通過控制輸入框的寬高、邊框以及填充來使input變成我們想要的效果）
整體的百度實現代碼如下所示：
好了，本篇文章就給大家說到這里，大家自己動手寫一下百度首頁看能不能寫出一樣的頁面效果出來，有需要源碼的可以直接私信我即可。
每日金句：沉重的擔子是由那些有著堅強的肩膀的人來挑的。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
