.盒模型寬度計算
2.margin縱向重疊問題
3.margin負(fù)值問題
4.bfc理解和應(yīng)用
5.float布局
6.flex布局:實現(xiàn)一個三點的色子
7.css定位
8.line-height如何繼承
9.css響應(yīng)式
下面依次看下:
1.盒模型寬度計算,下面div的offsetWidth
<style type="text/css">
#div1 {
width: 100px;
padding: 10px;
border: 1px solid #ccc;
margin: 10px;
}
</style>
<div id="div1">
this is div1
</div>
offsetWidth=內(nèi)容寬度 + 內(nèi)邊距 + 邊框。無外邊距。
所以 offsetWidth=100 + 10 * 2 + 1 * 2=122px
補(bǔ)充:如果讓offsetWidth=100px ,可以怎么做
答:加上box-sizing: border-box;
2.margin縱向重疊問題:如下代碼,AAA和BBB之間的距離是多少?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>margin 縱向重疊</title>
<style type="text/css">
p {
font-size: 16px;
line-height: 1;
margin-top: 10px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>
</body>
</html>
知識點:
1.相鄰元素的margin-top和margin-bottom 會發(fā)生重疊
2.空白內(nèi)容的p也會重疊
3.所以答案是:15px
3.margin負(fù)值問題
知識點:
1.margin-top和margin-left負(fù)值,元素向上,向左移動
2.margin-right負(fù)值,右側(cè)元素左移,自身不受影響
3.margin-bottom負(fù)值,下方元素上移,自身不受影響
4.bfc理解和應(yīng)用
概念:
1.塊級格式化上下文
2.一塊獨立渲染區(qū)域,內(nèi)部元素的渲染不會影響邊界以外的元素
形成bfc的常見條件:
1.float不是none
2.position是absolute或fixed
3.overflow不是visible
4.display是flex inline-block等
bfc常見應(yīng)用:清除浮動
// bfc前
<style type="text/css">
.container {
background-color: #f1f1f1;
}
.left {
float: left;
}
</style>
<div class="container">
<img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px;"/>
<p>某一段文字……</p>
</div>
// bfc后:在父元素和p元素上添加bfc
<style type="text/css">
.container {
background-color: #f1f1f1;
}
.left {
float: left;
}
.bfc {
overflow: hidden; /* 觸發(fā)元素 BFC */
}
</style>
<div class="container bfc">
<img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px;"/>
<p class="bfc">某一段文字……</p>
</div>
5.float布局
知識點:
1.如何實現(xiàn)圣杯布局和雙飛翼布局
2.手寫clearfix
圣杯布局和雙飛翼布局的目的:
1.三欄布局,中間一欄最先加載和渲染
2.兩側(cè)內(nèi)容固定,中間內(nèi)容隨著寬度自適應(yīng)
圣杯布局和雙飛翼布局的目的:
1.使用float布局
2.兩側(cè)使用margin負(fù)值,以便和中間內(nèi)容橫向重疊
3.防止中間內(nèi)容被兩側(cè)覆蓋,一個用padding,一個用margin
圣杯布局:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圣杯布局</title>
<style type="text/css">
body {
min-width: 550px;
}
#header {
text-align: center;
background-color: #f1f1f1;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
float: left;
}
#center {
background-color: #ccc;
width: 100%;
}
#left {
position: relative;
background-color: yellow;
width: 200px;
margin-left: -100%;
right: 200px;
}
#right {
background-color: red;
width: 150px;
margin-right: -150px;
}
#footer {
text-align: center;
background-color: #f1f1f1;
}
/* 手寫 clearfix */
.clearfix:after {
content: '';
display: table;
clear: both;
}
</style>
</head>
<body>
<div id="header">this is header</div>
<div id="container" class="clearfix">
<div id="center" class="column">this is center</div>
<div id="left" class="column">this is left</div>
<div id="right" class="column">this is right</div>
</div>
<div id="footer">this is footer</div>
</body>
</html>
雙飛翼布局:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>雙飛翼布局</title>
<style type="text/css">
body {
min-width: 550px;
}
.col {
float: left;
}
#main {
width: 100%;
height: 200px;
background-color: #ccc;
}
#main-wrap {
margin: 0 190px 0 190px;
}
#left {
width: 190px;
height: 200px;
background-color: #0000FF;
margin-left: -100%;
}
#right {
width: 190px;
height: 200px;
background-color: #FF0000;
margin-left: -190px;
}
</style>
</head>
<body>
<div id="main" class="col">
<div id="main-wrap">
this is main
</div>
</div>
<div id="left" class="col">
this is left
</div>
<div id="right" class="col">
this is right
</div>
</body>
</html>
6.flex布局:實現(xiàn)一個三點的色子
常用語法:
flex-direction justfy-content align-items flex-wrap align-self
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex 畫骰子</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
border: 2px solid #ccc;
border-radius: 10px;
padding: 20px;
display: flex;
justify-content: space-between;
}
.item {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #666;
}
.item:nth-child(2) {
align-self: center;
}
.item:nth-child(3) {
align-self: flex-end;
}
</style>
</head>
<body>
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</body>
</html>
7.css定位
absolute和relative定位:
1.relative根據(jù)自身定位
2.absolute根據(jù)最近一層的定位元素定位,,找不到,就根據(jù)body定位
水平居中:
inline元素:text-aligin:center
block元素:margin: auto
absoulte元素:left:50% + margin-left負(fù)值
垂直居中:
inline元素:line-height的值等于height的值
absolute元素:top:50% + margin-top 負(fù)值。需要知道元素的寬高
absolute元素:transform(-50%, -50%) 不需要知道寬高
absolute元素:top,left,bottom,right=0 + margin: auto 不需要知道寬高
水平對齊演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平對齊</title>
<style type="text/css">
.container {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
}
.item {
background-color: #ccc;
}
.container-1 {
text-align: center;
}
.container-2 .item {
width: 500px;
margin: auto;
}
.container-3 {
position: relative;
height: 100px;
}
.container-3 .item {
width: 300px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -150px;
}
</style>
</head>
<body>
<div class="container container-1">
<span>一段文字</span>
</div>
<div class="container container-2">
<div class="item">
this is block item
</div>
</div>
<div class="container container-3">
<div class="item">
this is absolute item
</div>
</div>
</body>
</html>
垂直對齊演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>垂直對齊</title>
<style type="text/css">
.container {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
height: 200px;
}
.item {
background-color: #ccc;
}
.container-1{
text-align: center;
line-height: 200px;
height: 200px;
}
.container-2 {
position: relative;
}
.container-2 .item {
width: 300px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -50px;
}
.container-3 {
position: relative;
}
.container-3 .item {
width: 200px;
height: 80px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
.container-4 {
position: relative;
}
.container-4 .item {
width: 100px;
height: 50px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="container container-1">
<span>一段文字</span>
</div>
<div class="container container-2">
<div class="item">
this is item
</div>
</div>
<div class="container container-3">
<div class="item">
this is item
</div>
</div>
<div class="container container-4">
<div class="item">
this is item
</div>
</div>
</body>
</html>
8.line-height如何繼承? 如下代碼:p的行高是多少?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>line-height 繼承問題</title>
<style type="text/css">
body {
font-size: 20px;
line-height: 200%;
}
p {
background-color: #ccc;
font-size: 16px;
}
</style>
</head>
<body>
<p>這是一行文字</p>
</body>
</html>
行高是40px。
有三種情況:
// body的line-height直接是數(shù)字,則p的line-height直接就是body的line-height,為40px
<style type="text/css">
body {
font-size: 20px;
line-height: 40px;
}
p {
background-color: #ccc;
font-size: 16px;
}
</style>
// body的line-height直接是比例,則p的line-height直接就是p的font-size * 比例,為24px
<style type="text/css">
body {
font-size: 20px;
line-height: 1.5;
}
p {
background-color: #ccc;
font-size: 16px;
}
</style>
// body的line-height直接是百分比,則p的line-height直接就是body的font-size * body的line-height,為40px
<style type="text/css">
body {
font-size: 20px;
line-height: 200%;
}
p {
background-color: #ccc;
font-size: 16px;
}
</style>
9.css響應(yīng)式
1.rem是什么?
2.響應(yīng)式布局方案?
rem是什么?
px:絕對長度單位,最常用
em:相對長度單位,相對于父元素,不常用
rem:相對長單位,相對于根元素html的font-size,用于響應(yīng)式
代碼演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>rem 演示</title>
<style type="text/css">
html {
font-size: 100px; // 1rem=100px
}
div {
background-color: #ccc;
margin-top: 10px;
font-size: 0.16rem;
}
</style>
</head>
<body>
<p style="font-size: 0.1rem">rem 1</p>
<p style="font-size: 0.2rem">rem 1</p>
<p style="font-size: 0.3rem">rem 1</p>
<div style="width: 1rem;">
this is div1
</div>
<div style="width: 2rem;">
this is div2
</div>
<div style="width: 3rem;">
this is div3
</div>
</body>
</html>
響應(yīng)式布局方案?
1.媒體查詢
2.rem
3.vw/vh
vw:網(wǎng)頁視口寬度的1/100
vh:網(wǎng)頁視口高度的1/100
篇文章主要總結(jié)了一些在項目中遇到的一些小問題以及對應(yīng)的解決方案,避免日后踩坑,后續(xù)補(bǔ)充中,如果你對這些問題有不同的解答,歡迎評論
1. 輸入框使用v-model 綁定值,但是不能改變
// 第一種情況 <el-input v-model="form.title"></el-input> // 初始化 data () { return { form: {} } } // 賦值,其中formData為父組件傳過來的數(shù)據(jù) mounted (){ this.form.title=this.formData.title } // 感覺并沒有什么問題,但是就是不好用,解決辦法就是單獨賦值 data () { return { form: {}, title: '' } } // 第二種情況 在表單中使用時,用:model=""給輸入框賦值 <el-form :model="formData"> <el-form-item> <el-input placeholder="請輸入" :model="formData.value" size="small"/> </el-form-item> </el-form> // 解決方案,改為 <el-input placeholder="請輸入" v-model="formData.value" size="small"/> 復(fù)制代碼
2. 文本內(nèi)容不對html標(biāo)簽轉(zhuǎn)譯
我想要輸入下面的內(nèi)容,但是保存數(shù)據(jù)后,就變成了aaa
解決辦法: 如果是html內(nèi)容、javascript、xml或其他特殊內(nèi)容,使用<xmp></xmp>
如果是有空格和回車這樣的特殊字符的簡單文本 在文本外加<pre></pre> 標(biāo)簽
3. 基礎(chǔ)導(dǎo)出功能
SensitiveOperationExport(params).then(res=> { if (res.data.code==='200') { // 這里是導(dǎo)出 window.location.href=res.data.data.path this.$message({ message: '導(dǎo)出成功!', type: 'success' }) } else { this.$message.error({message: '導(dǎo)出失敗!'}) } }) 復(fù)制代碼
4. 使用element table 時,禁用部分復(fù)選框
<el-table-column type="selection" align="center" fixed :selectable="selectable"></el-table-column> 復(fù)制代碼
官網(wǎng)上有這樣一個操作 selectable, 僅對 type=selection 的列有效,類型為 Function,F(xiàn)unction 的返回值用來決定這一行的 CheckBox 是否可以勾選
5.接口返回的數(shù)據(jù)為json類型,展示到表格中時,可以這樣轉(zhuǎn)換
// 數(shù)據(jù)結(jié)構(gòu) content: "{'title': '這是標(biāo)題'}" this.title=JSON.parse(content).title 復(fù)制代碼
6. 列表中點擊圖片放大功能
安裝viewer,可支持圖片的切換,旋轉(zhuǎn),放大等功能,具體操作文檔可百度查看,使用在頁面中也非常簡單,第一步,全局配置
// main.js 中引入配置 Viewer.setDefaults({ 'zIndex': 9999, 'inline': false, // 是否默認(rèn)展示縮略圖 'button': true, // 右上角按鈕 'navbar': true, // 底部縮略圖 'title': true, // 當(dāng)前圖片標(biāo)題 'toolbar': true, // 底部工具欄 'tooltip': true, // 顯示縮放百分比 'movable': false, // 是否可以移動 'zoomable': true, // 是否可以縮放 'rotatable': true, // 是否可旋轉(zhuǎn) 'scalable': true, // 是否可翻轉(zhuǎn) 'transition': true, // 使用 CSS3 過度 'fullscreen': true, // 播放時是否全屏 'keyboard': true, // 是否支持鍵盤 'url': 'data-source' }) // 頁面中使用 <viewer> <img :src="scope.row.content "/> </viewer> 復(fù)制代碼
7. 上移和下移操作
一般來說,上移和下移是掉接口操作的,但是也有不掉接口的
/ 上移 moveUp (index, row) { if (index > 0) { let upDate=this.tableData[index - 1] this.tableData.splice(index - 1, 1) this.tableData.splice(index, 0, upDate) } }, // 下移 moveDown (index, row) { if ((index + 1)===this.tableData.length) { console.log('已經(jīng)是最后一條,不可下移') } else { let downDate=this.tableData[index + 1] this.tableData.splice(index + 1, 1) this.tableData.splice(index, 0, downDate) } } 復(fù)制代碼
8. 表格的全選和反選
<el-table :data="tableData" border :select-all="allSelect" @selection-change="changeFun" ref="form" height="700"></el-table> // tableData 是表格數(shù)據(jù) <div> <el-button @click="toggleSelect(tableData)">全選</el-button> <el-button @click="reverseSelect(tableData)">反選</el-button> </div> // 全選 toggleSelect (rows) { if (rows) { rows.forEach(row=> { this.$refs.form.toggleRowSelection(row, !this.allSelect) }) this.allSelect=!this.allSelect } }, // 反選 reverseSelect (rows) { let checked=this.data if (rows) { rows.map(row=> { checked && checked.map(item=> { if (row.index !==item.index) { this.$refs.form.toggleRowSelection(item, false) this.$refs.form.toggleRowSelection(row, true) } else { this.$refs.form.toggleRowSelection(row, false) } }) }) if (checked.length===0) { rows.forEach(row=> { this.$refs.form.toggleRowSelection(row, true) }) } } }, // 獲取選擇的數(shù)據(jù) changeFun (val) { this.data=val } 復(fù)制代碼
9. 按住說話功能
這個功能依賴于recorder.js, 上一篇文章已經(jīng)介紹過用法了,這里就不在細(xì)說
10. 表格編輯和保存切換
// editColorShow: '' // 設(shè)置敏感操作默認(rèn)顯示編輯 // clearEdit: '000' // 替換editColorShow的值 <el-table-column label="操作" align="center" width="200"> <template slot-scope="scope"> <el-button size="small" v-if="editColorShow !==scope.$index" type="primary" @click="editColor(scope.$index, scope.row)">編輯</el-button> <el-button size="small" v-if="editColorShow===scope.$index" type="primary" @click="submitSettingOperation(scope.$index, scope.row)">保存</el-button> </template> </el-table-column> // 方法中這樣 editColor (index, row) { this.editColorShow=index }, submitSettingOperation (index, data) { this.editColorShow=this.clearEdit } 復(fù)制代碼
11. 深拷貝
第一種:
function copy(arr) { var newObj=arr.constructor===Array ? [] : {} if (typeof arr==='object') { for (var i in arr) { if (typeof arr[i]==='object') { newObj[i]=copy(arr[i]) } newObj[i]=arr[i] } return newObj } else { return } } 復(fù)制代碼
第二種
function copy (obj) { var newObj=obj.constructor===Array ? [] : {} newObj=JSON.parse(JSON.stringify(obj)) return newObj } 復(fù)制代碼
12.表單重置問題
之前重置表單的時候都是this.form.xx='',如果是一兩個還好,但是如果表單很多的話就不是很適用了,發(fā)現(xiàn)了一個很便捷的操作,只要一行代碼就搞定了
this.$refs['infoForm'].resetFields() // 前提是要重置的輸入框必須設(shè)置prop屬性才可以 復(fù)制代碼
13. txt文件導(dǎo)出,有兩種方式
第一種 純前端下載
fetch('https://xxxxx.com/' + item.path).then(res=> res.blob().then(blob=> { var a=document.createElement('a') var url=window.URL.createObjectURL(blob) var filename='text.txt' a.href=url a.download=filename a.click() window.URL.revokeObjectURL(url) })) 復(fù)制代碼
第二種 獲取到txt的內(nèi)容后下載
createDownload (fileName, content) { var blob=new Blob([content]) var link=document.createElement('a') var bodyEle=document.getElementsByTagName('body')[0] link.innerHTML=fileName link.download=fileName link.href=URL.createObjectURL(blob) bodyEle.appendChild(link) link.click() bodyEle.removeChild(link) } 復(fù)制代碼
雖然兩種都可以實現(xiàn)下載,但是要保證下載的接口可以在頁面中訪問到,不會有跨域等問題
14. 導(dǎo)出exel
導(dǎo)出表格這里提供兩種方法,第一種依賴第三方,首先下載三個依賴
下載Blob.js和Export2Excel.js 兩個文件,引入文件中
// npm install file-saver xlsx script-loader --save // 導(dǎo)出 onExportExcel (formName) { import('@/vendor/Export2Excel').then(excel=> { // 表格的title const tHeader=['訂單編號', '姓名', '員工編號', '手機(jī)號', '公司'] // 對應(yīng)的字段 const filterVal=['sn', 'user_name', 'user_no', 'user_phone', 'user_company'] const data=this.formatJson(filterVal, this.dataTable) excel.export_json_to_excel({ header: tHeader, data, filename: `訂單列表` }) }) }, formatJson (filterVal, jsonData) { let arr=jsonData.map(v=> filterVal.map(j=> v[j])) return arr } 復(fù)制代碼
第二種 通過vue-json-excel,具體細(xì)節(jié)可參考vue-json-excel
// 安裝 npm install vue-json-excel,引入 // vue中使用 <download-excel class="btn btn-default" :data="json_data" :fields="json_fields" worksheet="My Worksheet" name="filename.xls"> </download-excel> data(){ return { // 要導(dǎo)出的字段 json_fields: { 'Complete name': 'name', 'City': 'city', 'Telephone': 'phone.mobile', 'Telephone 2' : { field: 'phone.landline', callback: (value)=> { return `Landline Phone - ${value}`; } }, }, // 要導(dǎo)出的數(shù)據(jù) json_data: [ { 'name': 'Tony Pe?a', 'city': 'New York', 'country': 'United States', 'birthdate': '1978-03-15', 'phone': { 'mobile': '1-541-754-3010', 'landline': '(541) 754-3010' } }, { 'name': 'Thessaloniki', 'city': 'Athens', 'country': 'Greece', 'birthdate': '1987-11-23', 'phone': { 'mobile': '+1 855 275 5071', 'landline': '(2741) 2621-244' } } ], json_meta: [ [ { 'key': 'charset', 'value': 'utf-8' } ] ] } } 復(fù)制代碼
15.導(dǎo)航欄中使用iconfont,選中不變色問題
先來看看對比
項目是基于element-ui開發(fā)的,避免不了使用到圖標(biāo),所以阿里圖庫是個很好的選擇,這里遇到的問題是左側(cè)導(dǎo)航欄選中后,文字顏色發(fā)生變化,但是圖標(biāo)卻一直不變,一般來說引用阿里圖庫有三種方式:Unicode、Font Class 、symbol;我用的是symbol方式引用,具體如下
1.圖標(biāo)選用的是svg格式,選擇要使用的圖標(biāo),下載svg格式
2.創(chuàng)建icon文件夾用于存放圖標(biāo),創(chuàng)建svgIcon文件夾用于使用圖標(biāo),使用如下
3.這里導(dǎo)致圖標(biāo)不變色的原因是下載的圖標(biāo)本身就是帶有顏色的,那么在通過symbol獲取圖標(biāo)時會在svg的path中增加fill屬性,導(dǎo)致無法更改顏色,可以將圖標(biāo)中fill屬性置空,這樣就可以解決了
界上最古老的懸索橋在哪?在云南永平杉陽鄉(xiāng)和保山水寨鄉(xiāng)之間的讕滄江上,名為霽虹橋,史稱“蘭津橋”。因西漢時通往緬甸、印度的西南絲綢之路“金齒咽喉”的蘭津渡口而得名。霽虹橋最早為木橋,始建于東漢,南詔時改竹索吊橋,明代改為鐵索橋。1681年重建,長106米,寬3.7米,由9股18根鐵鏈組成,鐵索兩頭固定在博南山和羅岷山的山巖上,橋面鋪木板。原本橋中央有亭,兩頭有關(guān)隘,現(xiàn)無,1986年橋被洪水沖垮,后移位于原橋西二十幾米 處東旁的原橋墩還殘存。
永平博南古道因處博南山而得名,它是古代西南絲綢之路,亦稱“蜀身毒道”上最難行的一段,也因為路難行,才使古橋能保存至今。今重赴博南古道,細(xì)細(xì)品味,無盡遐思。
穿越霽虹橋:
2005年5月我們父子倆從當(dāng)時的滬梅隴乘N521次8:18始發(fā),經(jīng)杭州聯(lián)1515次到貴陽再聯(lián)2079次(均不出站)到昆明,四聯(lián)N996次大理火車,第3天14:06到祥云(四列里2列是無空調(diào)火車),比滬直達(dá)昆明轉(zhuǎn)祥云或大理的反省時13小時或4小時,省247元(單程)。北上雞足山、賓川、瀘沽湖后經(jīng)大理、麗江、中甸再返大理客運站乘7:00至18:00每20分鐘/班車百公里20元(2005年,下同)到永平縣,再每小時一班車12元到簡陋的杉陽鄉(xiāng),叫了輛摩的2個人3公里3元,路況較差,途經(jīng)永國寺、金浪巔神祠、土堆古墓群、橋墩己被土淹埋達(dá)3米的明代鳳鳴橋,江頂寺門樓等古跡,到灣子村路盡頭。
下載(45.8 KB)
4 天前 13:39
下載(97.41 KB)
4 天前 14:00
下載(92.84 KB)
4 天前 14:00
司機(jī)很熱情,想帶我倆去找村里的永國寺主持,正巧遇到一位老漢趕牛上山放牧,司機(jī)用方言與老漢交談后,叫我們跟老漢上山。我背著35斤重的行囊,跟著上行,先是米寬的土路,此道原是博南古道,如今成牛道,多牛糞。還未至頂,己體會到什么叫汗流浹背,走走息息,還得拍照,不見了老漢蹤影,好在只要攀向埡口就行。臨近埡口是2尺寬的青石板路,石板上多馬蹄印,深的足有15CM。共上坡3公里到殘缺不全的明代門樓,開始下坡,半道只見一戶農(nóng)家,門前有株高高的兩層的芙春花,或是八角梅之類,花背后聳立著一棵黃槐樹,俯瞰花樹下方,正對著江面,美極了。我想走近它,看哪個位置最美,結(jié)果就懶得再上行百米去拍照。三呼五喊,總算請出一位壯漢,請他代為背包,下坡1500米20元,可能語言不通,沒成交。下行的羊腸小道彎彎曲曲,陡峭,走了半程,后面趕上來一位大步流星下行去水寨鄉(xiāng)辦事的老鄉(xiāng),而我們見峽底洶涌奔騰的讕滄江水,只能小心翼翼地下行。距橋還有500米,老鄉(xiāng)總算代為背包,他的速度快一倍,距橋400米時才見霽虹橋,氣勢實足。老鄉(xiāng)急于辦事先行了,我們在橋頭悠逛,橋西(或南)多崖刻,如明代的“滄江鐵索跨長虹,鳥道從天一線通”。沿微微上坡路,向南1公里到了保山水寨鄉(xiāng)的平坡村。鄉(xiāng)民說到水寨鄉(xiāng)走大路10公里,走古道全是上坡約4公里,這可與我看到的書上、網(wǎng)上說的全是平坡和下坡風(fēng)馬牛不相及,應(yīng)該是反行才對呀。剛才上坡3公里己夠嗆,若沒包,沒關(guān)系,想想只有找村公所。
下載(86.46 KB)
4 天前 13:39
下載(109.6 KB)
4 天前 13:39
下載(107.76 KB)
4 天前 13:39
下載(105.12 KB)
4 天前 13:39
李主任和一位鄉(xiāng)干事姑娘熱情招待,打電話聯(lián)系,說村里3輛摩托和鄉(xiāng)里的幾輛小車(50元)全上保山了,只有一輛專跑村里的農(nóng)用卡車,照規(guī)矩往返80元。村主任說這橋不是以中間為界,而是處在保山界內(nèi),卻被永平搶先注冊,屬永平,維修卻歸水寨鄉(xiāng),鄉(xiāng)有開發(fā)此橋之意。主任說走到水寨全是古道,還有一段百米須抓著鐵鏈上攀,很費力的,正如徐霞客所云:“人若破壁捫天,水若爭道躍壑---冷人心骨。”奇險。景色到是很不錯的。只可惜我們有行囊,失之交臂了。
2小時后乘上卡車,先上坡路,如老牛爬坡,3公里開了30分鐘,幾次頭碰車頂,好在只是時有毛毛雨,否則路更難行,這車費不貴,若人多還頂合算。后7公里開了15分鐘,到了水寨鄉(xiāng),住進(jìn)李主任聯(lián)系好的旅社,20元普間,就我倆,洗澡、洗衣,好痛快。得謝謝主任。
驚現(xiàn)天然“美女與梯田”壁畫:
在卡車開3公里到土公路最高將左拐彎時,我偶然發(fā)現(xiàn)永平縣杉陽鄉(xiāng)的陡峭的江岸崖壁似梯田,下車仔細(xì)一瞧,好美啊!起碼還有二三位美女,中間的一位如西域美女,尖挺的鼻子,流水痕跡如豐乳,惟妙惟肖,整體由和諧的草木和黃褐色巖體構(gòu)成,豎橫有致,線條清晰,天成美景,寬約有1500米,高4、5百米,怕是獨一無二的。司機(jī)大為驚訝地說,他幾乎天天跑平坡村,沒發(fā)現(xiàn)這奇景,也沒聽老鄉(xiāng)說起。此距壁畫起碼有千余米,又臨17:00和下小雨,照沒現(xiàn)場清楚。
新游程設(shè)計
各地飛機(jī)到昆明轉(zhuǎn)保山,或出昆明機(jī)場乘公交26、52路到市中心。或乘火車到昆明。以滬為例,有兩列直達(dá)火車到昆明,也可預(yù)購火車三聯(lián)票,上海南站乘1213次7:04發(fā)無空調(diào)車,翌日11:14到貴陽,聯(lián)2019次19:30始發(fā)空調(diào)車,第3天6:32到昆明,再聯(lián)N818次8:01始發(fā)無空調(diào)車15:13到大理,出站18路到客運站乘班車600公里到保山;也可出昆明火車站北500米客運站班車多,到保山,第4天轉(zhuǎn)4班/天車到水寨鄉(xiāng),返是16:30末班車,但往往14:30己開走了。寄好行囊,包輛7人小車往返50元經(jīng)平坡村到霽虹橋,或步行到霽虹橋,一路觀賞美景,不過,返時還是乘車省力省時,若穿越到灣子村要4小時(反穿5小時),有行囊者由保山到永平省力,山里上行只有2公里,反之有7公里。到橋東頭左拐去巖洞村,右拐是去灣子村,此后請村公所代請摩的。幾個村里都無宿。
IMG_0586.jpg(65.41 KB) 下載次數(shù):0
4 天前 13:39
關(guān)于照片:由于用的是膠卷,外出平均3天一卷,一天起碼游2、3個景區(qū),就是一個景區(qū)四、五張,有人像照,有照差的,所以一處只存2、3張了。投稿又不退文照(只有“新民晚報”列外),比如07年,“旅游時報”,由于一登就整版,我三四個月里連投23文56照,每文有二三千字,還特地寫明“不用請保存,到時來拿”,以前也這樣。不料,編輯離職了,總編說“她不在,全丟了”。天啊!如此!人不在應(yīng)該退原處,又不要你郵費,我就不會再寄了,也怪自己沒聯(lián)系。現(xiàn)翻出底片印部分(精打細(xì)算),借數(shù)碼相機(jī)翻拍才能上網(wǎng)。請諒解。沒走"梯云路"非常可惜,但無意發(fā)現(xiàn)了天然壁畫"美女與梯田",也不錯。
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。