first commit

历届学生/font-end-nine/项目练习/学生项目/张婷/vueproject/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
+    "stage-2"
+  ],
+  "plugins": ["transform-vue-jsx", "transform-runtime"]
+}

历届学生/font-end-nine/项目练习/学生项目/张婷/vueproject/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

历届学生/font-end-nine/项目练习/学生项目/张婷/vueproject/.eslintignore

@@ -0,0 +1,4 @@
+/build/
+/config/
+/dist/
+/*.js

历届学生/font-end-nine/项目练习/学生项目/张婷/vueproject/.eslintrc.js

@@ -0,0 +1,29 @@
+// https://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  env: {
+    browser: true,
+  },
+  extends: [
+    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
+    'plugin:vue/essential', 
+    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
+    'standard'
+  ],
+  // required to lint *.vue files
+  plugins: [
+    'vue'
+  ],
+  // add your custom rules here
+  rules: {
+    // allow async-await
+    'generator-star-spacing': 'off',
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  }
+}

历届学生/font-end-nine/项目练习/学生项目/张婷/vueproject/.gitignore

@@ -0,0 +1,14 @@
+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

历届学生/font-end-nine/项目练习/学生项目/张婷/vueproject/.postcssrc.js

@@ -0,0 +1,15 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
+    // to edit target browsers: use "browserslist" field in package.json
+    "autoprefixer": {},
+    "autoprefixer": {},
+    'postcss-pxtorem': {
+      rootValue: 37.5,
+      propList: ['*']
+    }
+  }
+}

历届学生/font-end-nine/项目练习/学生项目/张婷/vueproject/README.md

@@ -0,0 +1,21 @@
+# vueproject
+
+> A Vue.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+```
+
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

历届学生/font-end-nine/项目练习/学生项目/张婷/vueproject/build/build.js

@@ -0,0 +1,41 @@
+'use strict'
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
+
+const spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})

历届学生/font-end-nine/项目练习/学生项目/张婷/vueproject/build/check-versions.js

@@ -0,0 +1,54 @@
+'use strict'
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')
+
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+const versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  }
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  const warnings = []
+
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
+
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.log('  ' + warning)
+    }
+
+    console.log()
+    process.exit(1)
+  }
+}

历届学生/font-end-nine/项目练习/学生项目/张婷/vueproject/build/utils.js

@@ -0,0 +1,101 @@
+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const packageConfig = require('../package.json')
+
+exports.assetsPath = function (_path) {
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  const output = []
+  const loaders = exports.cssLoaders(options)
+
+  for (const extension in loaders) {
+    const loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+
+  return output
+}
+
+exports.createNotifierCallback = () => {
+  const notifier = require('node-notifier')
+
+  return (severity, errors) => {
+    if (severity !== 'error') return
+
+    const error = errors[0]
+    const filename = error.file && error.file.split('!').pop()
+
+    notifier.notify({
+      title: packageConfig.name,
+      message: severity + ': ' + error.name,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png')
+    })
+  }
+}

历届学生/font-end-nine/项目练习/学生项目/张婷/vueproject/build/vue-loader.conf.js

@@ -0,0 +1,22 @@
+'use strict'
+const utils = require('./utils')
+const config = require('../config')
+const isProduction = process.env.NODE_ENV === 'production'
+const sourceMapEnabled = isProduction
+  ? config.build.productionSourceMap
+  : config.dev.cssSourceMap
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: sourceMapEnabled,
+    extract: isProduction
+  }),
+  cssSourceMap: sourceMapEnabled,
+  cacheBusting: config.dev.cacheBusting,
+  transformToRequire: {
+    video: ['src', 'poster'],
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  }
+}

历届学生/font-end-nine/项目练习/学生项目/张婷/vueproject/build/webpack.base.conf.js

@@ -0,0 +1,96 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+const createLintingRule = () => ({
+  test: /\.(js|vue)$/,
+  loader: 'eslint-loader',
+  enforce: 'pre',
+  include: [resolve('src'), resolve('test')],
+  options: {
+    formatter: require('eslint-friendly-formatter'),
+    emitWarning: !config.dev.showEslintErrorsInOverlay
+  }
+})
+
+module.exports = {
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+    }
+  },
+  module: {
+    rules: [
+      ...(config.dev.useEslint ? [createLintingRule()] : []),
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+      },
+      {
+        test:/\.less$/,
+        loader:"style-loader!css-loader!less-loader"
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  node: {
+    // prevent webpack from injecting useless setImmediate polyfill because Vue
+    // source contains it (although only uses it if it's native).
+    setImmediate: false,
+    // prevent webpack from injecting mocks to Node native modules
+    // that does not make sense for the client
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  }
+}

历届学生/font-end-nine/项目练习/学生项目/张婷/vueproject/build/webpack.dev.conf.js

@@ -0,0 +1,95 @@
+'use strict'
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const path = require('path')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')
+
+const HOST = process.env.HOST
+const PORT = process.env.PORT && Number(process.env.PORT)
+
+const devWebpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: config.dev.devtool,
+
+  // these devServer options should be customized in /config/index.js
+  devServer: {
+    clientLogLevel: 'warning',
+    historyApiFallback: {
+      rewrites: [
+        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
+      ],
+    },
+    hot: true,
+    contentBase: false, // since we use CopyWebpackPlugin.
+    compress: true,
+    host: HOST || config.dev.host,
+    port: PORT || config.dev.port,
+    open: config.dev.autoOpenBrowser,
+    overlay: config.dev.errorOverlay
+      ? { warnings: false, errors: true }
+      : false,
+    publicPath: config.dev.assetsPublicPath,
+    proxy: config.dev.proxyTable,
+    quiet: true, // necessary for FriendlyErrorsPlugin
+    watchOptions: {
+      poll: config.dev.poll,
+    }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': require('../config/dev.env')
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    }),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.dev.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+module.exports = new Promise((resolve, reject) => {
+  portfinder.basePort = process.env.PORT || config.dev.port
+  portfinder.getPort((err, port) => {
+    if (err) {
+      reject(err)
+    } else {
+      // publish the new Port, necessary for e2e tests
+      process.env.PORT = port
+      // add port to devServer config
+      devWebpackConfig.devServer.port = port
+
+      // Add FriendlyErrorsPlugin
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+        },
+        onErrors: config.dev.notifyOnErrors
+        ? utils.createNotifierCallback()
+        : undefined
+      }))
+
+      resolve(devWebpackConfig)
+    }
+  })
+})

历届学生/font-end-nine/项目练习/学生项目/张婷/vueproject/build/webpack.prod.conf.js

@@ -0,0 +1,145 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+
+const env = require('../config/prod.env')
+
+const webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true,
+      usePostCSS: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? config.build.devtool : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false
+        }
+      },
+      sourceMap: config.build.productionSourceMap,
+      parallel: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
+      // Setting the following option to `false` will not extract CSS from codesplit chunks.
+      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
+      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
+      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
+      allChunks: true,
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: config.build.productionSourceMap
+        ? { safe: true, map: { inline: false } }
+        : { safe: true }
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: config.build.index,
+      template: 'index.html',
+      inject: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // keep module.id stable when vendor modules does not change
+    new webpack.HashedModuleIdsPlugin(),
+    // enable scope hoisting
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks (module) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      minChunks: Infinity
+    }),
+    // This instance extracts shared chunks from code splitted chunks and bundles them
+    // in a separate chunk, similar to the vendor chunk
+    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'app',
+      async: 'vendor-async',
+      children: true,
+      minChunks: 3
+    }),
+
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+if (config.build.productionGzip) {
+  const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig

历届学生/font-end-nine/项目练习/学生项目/张婷/vueproject/config/dev.env.js

@@ -0,0 +1,7 @@
+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})

历届学生/font-end-nine/项目练习/学生项目/张婷/vueproject/config/index.js

@@ -0,0 +1,76 @@
+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warnings will be shown in the console.
+    useEslint: false,
+    // If true, eslint errors and warnings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: './',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: true,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}

历届学生/font-end-nine/项目练习/学生项目/张婷/vueproject/config/prod.env.js

@@ -0,0 +1,4 @@
+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}

历届学生/font-end-nine/项目练习/学生项目/张婷/vueproject/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>vueproject</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

历届学生/font-end-nine/项目练习/学生项目/张婷/vueproject/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "vueproject",
+  "version": "1.0.0",
+  "description": "A Vue.js project",
+  "author": "玛卡巴卡 <632515583@qq.com>",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "start": "npm run dev",
+    "lint": "eslint --ext .js,.vue src",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "axios": "^0.27.2",
+    "vant": "^2.12.48",
+    "vue": "^2.5.2",
+    "vue-router": "^3.0.1",
+    "amfe-flexible": "^2.2.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.2",
+    "babel-core": "^6.22.1",
+    "babel-eslint": "^8.2.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-plugin-transform-vue-jsx": "^3.5.0",
+    "babel-preset-env": "^1.3.2",
+    "babel-preset-stage-2": "^6.22.0",
+    "chalk": "^2.0.1",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.28.0",
+    "eslint": "^4.15.0",
+    "eslint-config-standard": "^10.2.1",
+    "eslint-friendly-formatter": "^3.0.0",
+    "eslint-loader": "^1.7.1",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-node": "^5.2.0",
+    "eslint-plugin-promise": "^3.4.0",
+    "eslint-plugin-standard": "^3.0.1",
+    "eslint-plugin-vue": "^4.0.0",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^1.1.4",
+    "friendly-errors-webpack-plugin": "^1.6.1",
+    "html-webpack-plugin": "^2.30.1",
+    "less": "^4.1.2",
+    "less-loader": "^4.1.0",
+    "node-notifier": "^5.1.2",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "ora": "^1.2.0",
+    "portfinder": "^1.0.13",
+    "postcss-pxtorem": "^5.1.1",
+    "postcss-import": "^11.0.0",
+    "postcss-loader": "^2.0.8",
+    "postcss-url": "^7.2.1",
+    "rimraf": "^2.6.0",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "uglifyjs-webpack-plugin": "^1.1.1",
+    "url-loader": "^0.5.8",
+    "vue-loader": "^13.3.0",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.5.2",
+    "webpack": "^3.6.0",
+    "webpack-bundle-analyzer": "^2.9.0",
+    "webpack-dev-server": "^2.9.1",
+    "webpack-merge": "^4.1.0"
+  },
+  "engines": {
+    "node": ">= 6.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

历届学生/font-end-nine/项目练习/学生项目/张婷/vueproject/src/App.vue

@@ -0,0 +1,23 @@
+<template>
+  <div id="app">
+    <img src="./assets/logo.png">
+    <router-view/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>
+
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

历届学生/font-end-nine/项目练习/学生项目/张婷/vueproject/src/components/HelloWorld.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <h2>Essential Links</h2>
+    <ul>
+      <li>
+        <a
+          href="https://vuejs.org"
+          target="_blank"
+        >
+          Core Docs
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://forum.vuejs.org"
+          target="_blank"
+        >
+          Forum
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://chat.vuejs.org"
+          target="_blank"
+        >
+          Community Chat
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://twitter.com/vuejs"
+          target="_blank"
+        >
+          Twitter
+        </a>
+      </li>
+      <br>
+      <li>
+        <a
+          href="http://vuejs-templates.github.io/webpack/"
+          target="_blank"
+        >
+          Docs for This Template
+        </a>
+      </li>
+    </ul>
+    <h2>Ecosystem</h2>
+    <ul>
+      <li>
+        <a
+          href="http://router.vuejs.org/"
+          target="_blank"
+        >
+          vue-router
+        </a>
+      </li>
+      <li>
+        <a
+          href="http://vuex.vuejs.org/"
+          target="_blank"
+        >
+          vuex
+        </a>
+      </li>
+      <li>
+        <a
+          href="http://vue-loader.vuejs.org/"
+          target="_blank"
+        >
+          vue-loader
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/awesome-vue"
+          target="_blank"
+        >
+          awesome-vue
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App'
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1, h2 {
+  font-weight: normal;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

历届学生/font-end-nine/项目练习/学生项目/张婷/vueproject/src/main.js

@@ -0,0 +1,19 @@
+import 'amfe-flexible'
+import Vue from 'vue'
+import App from './App'
+import router from './router'
+
+import Vant from 'vant';
+import 'vant/lib/index.css';
+
+Vue.config.productionTip = false
+
+Vue.use(Vant);
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  components: { App },
+  template: '<App/>'
+})

历届学生/font-end-nine/项目练习/学生项目/张婷/vueproject/src/page/Home.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="home">
+        首页
+    </div>
+</template>
+
+
+<script>
+//导入插件
+//const 变量名 = require ‘axios’同下
+
+import axios from 'axios'
+
+export default {
+    data(){
+        return{
+
+        }
+    },
+    //生命周期
+    created () {
+        this.getDate()
+    },
+
+    methods: {
+        getDate(){
+            axios.get('http://127.0.0.1:3000/api/index/class',{
+                params:{
+                    type:1,
+                    page:1
+                }
+            })
+
+            .then(function(response){
+                console.log(response);
+            })
+            .catch(function(error){
+                console.log(error);
+            })
+            .then(function(){
+                console.log();
+            })
+        }
+    }
+}
+</script>
+
+
+<style>
+
+</style>

历届学生/font-end-nine/项目练习/学生项目/张婷/vueproject/src/router/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import HelloWorld from '@/components/HelloWorld'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'HelloWorld',
+      component: HelloWorld
+    }
+  ]
+})

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/2022-5-30网页结构/QQreading.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <div class="top">
+        <div class="top-logo">
+            <img src="" alt="">
+            <ul>
+                <li></li>
+            </ul>
+        </div>
+        <div class="top-search">
+            <div class="search-input">
+                <input type="text" placeholder="">
+                <img src="" alt="">
+            </div>
+            <ul>
+                <li></li>
+            </ul>
+        </div>
+    </div>
+    <div class="content">
+        <div class="content-top">
+            <img src="" alt="">
+            <div>
+                <p>扫码下载</p>
+                <p>QQ阅读APP</p>
+                <p></p>
+            </div>
+            <img src="" alt="">
+        </div>
+        <div class="content-bottom">
+            <img src="" alt="">
+            <ul>
+                <li class="text">
+                    <div class="title"></div>
+                    <p></p>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <div class="fotter"></div>
+</body>
+</html>

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/2022-5-30网页结构/ZhuHu.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <div class="top">
+        <div class="top_left">
+            <img src="" alt="">
+            <ul>
+                <li></li>
+            </ul>
+        </div>
+        <div class="search">
+            <input type="text" placeholder="">
+            <img src="" alt="">
+        </div>
+        <div class="record">
+            <div>
+                <img src="" alt="">
+                <span></span>
+            </div>
+            <button></button>
+        </div>
+    </div>
+
+    <div class="content">
+        <div class="content_left">
+            <div class="content_left_title">
+                <img src="" alt="">
+                <span></span>
+            </div>
+            <div class="img">
+                <div>
+                    <p>登录</p>
+                    <p></p>
+                </div>
+                <button>登录</button>
+            </div>
+        </div>
+        <div class="content_right">
+            <div class="content_right_title"></div>
+            <div class="content_right_text">
+                <ul>
+                    <li class="text">
+                        <div class="text_top">
+                            <img src="" alt="">
+                            <div class="title"></div>
+                        </div>
+                        <p><span></span><span></span><span></span></p>
+                    </li>
+                </ul>
+            </div>
+        </div>
+
+    </div>
+    <div class="fotter"></div>
+</body>
+
+</html>

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/2022-5-30网页结构/tencent.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <div class="top">
+        <img src="" alt="">
+        <div class="search">
+            <input type="text" placeholder="">
+            <button>搜狗搜索</button>
+        </div>
+        <div class="icon">
+            <span>无障碍预览</span>
+            <img src="" alt="">
+            <img src="" alt="">
+            <span>登录</span>
+        </div>
+    </div>
+    <ul class="menu">
+        <li></li>
+    </ul>
+    <div class="content">
+        <div class="content_left">
+            <img src="" alt="">
+        <div class="contentA">
+            <div class="contentA-left-top">
+                <div class="title"></div>
+                <div class="span"></div>
+            </div>
+            <ul>
+                <li></li>
+            </ul>
+            <!-- ==ul -->
+            <div class="contentA-left-bottom">
+                <div class="contentA-left-bottom-item">
+                    <img src="" alt="">
+                    <p></p>
+                </div>
+            </div>
+        </div>
+        <div class="contentB">
+            <div class="contentB-left-top">
+                <div class="title"></div>
+                <p></p>
+                <ul>
+                    <li class="contentB-text">
+                        <div class="title"></div>
+                        <p></p>
+                    </li>
+                </ul>
+            </div>
+            <img src="" alt="">
+            <div class="contentAB-left-bottom">
+                <div class="contentB-left-bottom-item">
+                    <img src="" alt="">
+                    <p></p>
+                </div>
+            </div>
+        </div>
+        </div>
+        <div class="content_right">
+            <img src="" alt="">
+            <ul>
+                <li class="list"></li>
+            </ul>
+            <div class="news">
+                <div class="news top">
+                    <div class="news title"></div>
+                    <p>日期<span>比赛</span></p>
+                </div>
+                <img src="" alt="">
+            </div>
+        </div>
+    </div>
+    <div class="fotter"></div>
+
+
+</body>
+
+</html>

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/2022-5-30网页结构/搜狐体育结构练习index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <div class="top">
+        <img src="" alt="">
+        <ul>
+            <li></li>
+        </ul>
+        <div>
+            <img src="" alt="">
+            <span></span>
+        </div>
+    </div>
+    <div class="content">
+        <div class="content_top">
+            <img src="" alt="">
+            <div class="search">
+                <img class="search-left" src="" alt="">
+                <div class="search-center">
+                    <input type="text">
+                    <button></button>
+                </div>
+                <div class="search-right">
+                    <img src="" alt="">
+                    <span></span>
+                </div>
+            </div>
+        </div>
+        <div class="meun">
+            <ul>
+                <li></li>
+            </ul>
+        </div>
+    </div>
+    <div class="footer"></div>    
+</body>
+</html>

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/2022-5-30网页结构/菜鸟教程结构index.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <div class="top">
+        <img src="" alt="">
+        <input type="text" placeholder="">
+    </div>
+    <ul class="menu">
+        <li></li>
+    </ul>
+    <div class="content">
+        <div class="contant-left">
+            <div class="title">
+                <img src="" alt="">
+                <span></span>
+                <img src="" alt="">
+            </div>
+            <ul>
+                <li></li>
+            </ul>
+        </div>
+        <div class="contant-center">
+            <div class="top">
+                <div class="top-left">
+                    <img src="" alt="">
+                    <span></span>
+                </div>
+                <div class="top-right">
+                    <span></span>
+                    <img src="" alt="">
+                </div>
+            </div>
+            <div class="mytable">
+                <p></p>
+                <div>
+                    <img src="" alt="">
+                    <span></span>
+                </div>
+                <table></table>
+            </div>
+        </div>
+        <div class="contant-right">
+            <div class="title">
+                <img src="" alt="">
+                <span></span>
+            </div>
+            <ul>
+                <li></li>
+            </ul>
+        </div>
+    </div>
+    <div class="footer"></div>
+</body>
+
+</html>

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/2022-6-6定位/css/clear.css

@@ -0,0 +1,11 @@
+body,h1,h2,h3,h4,h5,h6,ul,li,p{
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+a {
+    text-decoration: none;
+}
+html{
+    font-size: 0;
+}

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/2022-6-6定位/css/haokan.css

@@ -0,0 +1,306 @@
+.recommend {
+    padding-top: 66px;
+    padding-left: 257px;
+}
+
+.menu {
+    width: 240px;
+    border-right: 1px solid #e6e6e6;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: white;
+    z-index: 9;
+}
+
+.top {
+    width: calc(1600px - 240px);
+    border-bottom: 1px solid #e6e6e6;
+    position: fixed;
+    right: 0;
+    top: 0;
+    background: white;
+    z-index: 8;
+}
+
+.menu .logo {
+    padding: 14px 0 33.86px;
+    text-align: center;
+}
+
+.menu img {
+    width: 146px;
+    height: 36px;
+}
+
+.menu .block {
+    padding: 0 28px;
+    box-sizing: border-box;
+    overflow: hidden;
+    height: calc(100vh - 84px);
+}
+
+.menu .block:hover {
+    overflow: overlay;
+}
+
+.menu .block ul {
+    padding: 16px 0;
+}
+
+.block .active {
+    background-color: #f7f7f7;
+}
+
+.block ul {
+    position: relative;
+}
+
+.block ul::after {
+    content: '';
+    width: 100%;
+    height: 1px;
+    background: #e6e6e6;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+}
+
+
+.menu .block li {
+    margin-top: 8px;
+    padding: 10px 0;
+}
+
+.block .top-0 li:first-child {
+    margin-top: 0;
+}
+
+.block li i {
+    margin: 0 6px 0 18px;
+}
+
+.block li a {
+    font-size: 16px;
+    color: #111622;
+}
+
+.blockC li a {
+    margin-left: 18px;
+}
+
+.blockA li i {
+    width: 24px;
+    height: 24px;
+}
+
+.blockA a {
+    font-size: 16px;
+    color: #111622;
+}
+
+
+.top {
+    overflow: hidden;
+}
+
+.top .search {
+    width: 438px;
+    height: 34px;
+    background-color: #f7f7f7;
+    overflow: hidden;
+    border-radius: 3px;
+    margin: 15px 0 15px 35px;
+    border: 1px solid #e6e6e6;
+    float: left;
+
+}
+
+.search input {
+    font-size: 14px;
+    padding: 0 10px;
+    border-style: none;
+    float: left;
+    background-color: #f7f7f7;
+    height: 100%;
+    width: calc(100% - 75px - 20px);
+
+
+}
+
+.search input:focus {
+    border: none;
+    outline: none;
+}
+
+.intrduce {
+    line-height: 34px;
+    position: relative;
+    float: left;
+    height: 100%;
+    color: #666;
+}
+
+.intrduce::before {
+    content: '';
+    height: 17px;
+    width: 1px;
+    background-color: #e6e6e6;
+    position: absolute;
+    top: calc((100% - 17px)/2);
+
+}
+
+.intrduce i {
+    float: left;
+    margin: 0 4px 0 10px;
+
+}
+
+.intrduce span {
+    font-size: 14px;
+    float: left;
+}
+
+.search_r {
+    float: right;
+    height: 34px;
+    margin: 15px 0;
+    line-height: 34px;
+}
+
+.search_r ul {
+    float: left;
+    overflow: hidden;
+}
+
+.search_r ul li {
+    font-size: 14px;
+    color: #111622;
+    float: left;
+    margin-right: 44px;
+}
+
+.search_r ul li i {}
+
+.search_r ul li span {}
+
+.search_r .button {
+    font-size: 14px;
+    color: #111622;
+    overflow: hidden;
+    float: right;
+}
+
+.search_r .button1 {
+    float: left;
+    margin-left: 16px;
+    border-radius: 5px;
+    border: 1px solid #e6e6e6;
+    padding: 0 12px;
+}
+
+.search_r .button2 {
+    float: left;
+    margin-left: 24px;
+    margin-right: 35px;
+    background-color: #ff2626;
+    border-radius: 5px;
+    border: 1px solid #e6e6e6;
+    padding: 0 28px;
+    color: white;
+}
+
+.content {
+    padding-top: 30px;
+    overflow: hidden;
+}
+
+
+.first {
+    width: 630px !important;
+    height: 280px !important;
+    border-radius: 3px !important;
+    overflow: hidden;
+}
+
+.first img {
+    width: 100%;
+    height: 100%;
+}
+
+.content li {
+    float: left;
+    margin-left: 16px;
+    width: 307px;
+    height: 280px;
+    margin-top:30px;
+    position: relative;
+}
+
+
+.content li .one {
+    width: 307px;
+    height: 172px;
+    border-radius: 3px;
+    margin-bottom: 10px;
+}
+
+.content li .ing{
+    position:absolute;
+    top: 15px;
+    left: 10px;
+    color: white;
+    background: #ff2626;
+    padding: 3px 10px;
+    border-radius: 20px;
+    font-size: 12px;
+}
+
+.content li .two {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+
+}
+
+
+.content li p {}
+
+.content li p i {}
+
+.content li .des {
+    width: 100%;
+}
+
+.content li .des_l {
+    float: left;
+}
+
+
+.content li .des_r {
+    float: left;
+    width: calc(100% - 36px - 10px);
+    margin-left: 10px;
+
+}
+
+
+.content li .des_r p:first-child {
+    font-size: 16px !important;
+    color: #111622 !important;
+    width: 100%;
+    overflow: hidden;
+    -webkit-line-clamp: 3;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+}
+.content li .des_r p:first-child:hover{
+    color: #ff2626;
+}
+
+.des_r p{
+    font-size: 14px;
+    color: #505666;
+}

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/2022-6-6定位/css/public.css

@@ -0,0 +1,11 @@
+.right{
+    float: right;
+}
+
+.left{
+    float: left;
+}
+
+.hidden{
+    overflow: hidden;
+}

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/2022-6.2~6.4css网页/Baidu.css

@@ -0,0 +1,148 @@
+
+.head{
+    width: 1190px;
+    margin: 0 auto;
+}
+
+.up{
+    overflow: hidden;
+    height: 46px; 
+    margin-bottom: 8px;
+    width: 100%;
+}
+.up img{
+    width: 128px;
+    height: 40px;
+    float: left;
+}
+
+.search{
+    float: left;
+    overflow: hidden;
+}
+
+
+.together{
+    margin-left: 16px;
+    float: left;
+    display: inline-block;
+    border: 2px solid #4662d9;
+    border-radius: 8px 0 0 8px;
+    border-right: none;
+}
+
+.des{
+    float: left;
+    overflow: hidden;
+    display: inline-block;
+    height: 39px;
+    line-height: 39px;
+}
+.des span{
+    float: left;
+    color: #9195a3;
+    font-size: 12px;
+    padding-left: 14px;
+    padding-right: 3px;
+}
+.des i{
+
+    float: left;
+    font-size: 12px;
+}
+
+.search input{
+    float: left;
+    border: none;
+    outline: none;
+    padding: 10px 33px 10px 15px;
+    width: 400px;
+    font-size: 16px;
+    color: #9195b8;
+}
+.search input:focus{
+    border: none;
+    outline:none;
+}
+.point{
+    float: left;
+    width: 18px;
+    height: 18px;
+    border-radius: 20px;
+    font-size: 12px;
+    background-color: #FC561F;
+    text-align: center;
+    line-height: 18px;
+    color: white;
+    margin-top: 9px;
+    margin-right: 12px;
+}
+.search button{
+    float: left;
+    font-size: 17.5px;
+    background: #4E6EF2;
+    color: #fff;
+    border: 2px solid #4662d9;
+    border-radius: 0 8px 8px 0;
+    border-left: none;
+    padding: 8px 24px 8px 24px;
+}
+
+.other{
+    float: left;
+}
+.other li{
+    font-size: 12px;
+    list-style: disc;
+    margin-left: 42px;
+    width: 120px;
+    color: #999;
+    margin-top: 8px;
+}
+
+
+/* 更改圆点大小伪类选择器 */
+.other li::marker{
+    font-size: 18px;
+    background-color: #999;
+}
+
+.other li:hover{
+    color: crimson;
+    text-decoration: underline;
+}
+
+.down{
+    overflow: hidden;
+    width: 669px;
+    margin-left: 160px;
+}
+.down ul{
+    float: left;
+    width: calc(100% - 16px);
+    
+}
+.down li{
+    color: #333;
+    font-size: 13px;
+    float: left;
+    margin-right: 18px;
+}
+.down i{
+     float: left;
+ }
+
+
+.down li > p{
+     display: inline-block;
+ }
+
+.down li > p:nth-child(2){
+    background-color: #FF455B;
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+    color: #fff;
+    text-align: center;
+    line-height: 16px;
+ }

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/2022-6.2~6.4css网页/Baidu.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3447676_osrf8u8rgh.css">
+    <link rel="stylesheet" href="clear.css">
+    <link rel="stylesheet" href="Jpublic.css">
+    <link rel="stylesheet" href="Baidu.css">
+</head>
+<body>
+    <div class="head">
+        <div class="up">
+            <img src="https://dss2.bdstatic.com/5bVYsj_p_tVS5dKfpU_Y_D3/res/r/image/2021-3-4/hao123%20logo.png" alt="显示错误">
+            <div class="search">
+                <div class="together">
+                    <div class="des">
+                        <span>网页</span>
+                        <i class="iconfont icon-xiala"></i>
+                    </div>
+                    <input type="text" placeholder="请输入查询文字">
+                    <div class="point">3</div>
+                </div>
+                <button>百度一下</button>       
+            </div>
+            <ul class="other">
+                <li>男子登顶珠峰后411天辗转7国回国</li>
+            </ul>
+        </div>
+        <div class="down">
+            <ul>
+                <li>
+                    刘洋三来拍：挥手、敬礼、比心
+                </li>
+                <li>
+                    <p>是谁在缔造越南经济神话?</p>
+                    <p>新</p>
+                </li>
+                <li>
+                    刘洋三来拍：挥手、敬礼、比心
+                </li>
+                <li>
+                    刘洋三来拍：挥手、敬礼、比心
+                </li>
+                <li>
+                    <p>刘洋三来拍：挥手、敬礼、比心</p>
+                    <p>新</p>
+                </li>                
+    
+                <li>
+                    <p>刘洋三来拍：挥手、敬礼、比心</p>
+                    <p>新</p>
+                </li>
+            </ul>
+            <i class="iconfont icon-xiala"></i>
+        </div>
+    </div>
+
+    
+</body>
+</html>

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/2022-6.2~6.4css网页/Douban.css

@@ -0,0 +1,147 @@
+.kind{
+    width: 935px;
+    margin: 0 auto;
+}
+.head{
+    overflow: hidden;
+    margin-bottom: 12px;
+}
+.head p{
+    font-size: 14px;
+    color: #072;
+    float: left;
+}
+.head span{
+    font-size: 12px;
+    float: left;
+}
+.head a{
+    color: #37a;
+}
+.head a:hover{
+    background-color: #37a;
+    color: white;
+}
+
+
+
+.content{
+    overflow: hidden;
+}
+.content_l{
+    float: left;}
+.content_l ul{
+    width: 350px;
+    overflow: hidden;
+    margin-right: 30px;
+}
+.content_l li{
+    float: left;
+    margin: 10px 10px 0 0;
+}
+.content_l li:nth-child(2n){
+    margin-right: 0;
+}
+.content_l li img{
+    width: 170px;
+    height: 170px;
+}
+.content_l li a{
+    color: #37a;
+    font-size: 12px;
+}
+.content_l li span{
+    color: #999;
+    font-size: 12px;
+}
+
+.content_l li a:hover{
+    background-color: #37a;
+    color: white;
+}
+
+
+
+.content_m{
+    float: left;
+    width: 275px;
+}
+.content_m a{
+    color: #37a;
+    font-size: 12px;
+}
+.top .introduce{
+    color: #999;
+    font-size: 12px;
+}
+.top p{
+    color: #666;
+    font-size: 12px;
+}
+
+.content_m .down{}
+.content_m .down li{
+    margin-top: 12px;
+}
+.content_m a:hover{
+    background-color: #37a;
+    color: white;
+}
+
+
+.content_r{
+    float: left;
+    margin-left: 30px;
+}
+.content_r .up{
+    width: 250px;
+    height: 125px;
+    background-size: 100%;
+    background-image: url("https://img9.doubanio.com/view/dale-online/dale_ad/public/d699ff43c998a56.jpg");
+    padding-top:101px;
+    padding-left: 218px;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+}
+.up .ad{
+    font-size: 12px;
+    padding: 4px;
+    color: rgb(255, 255, 255);
+    background-color: rgba(0, 0, 0, 0.3);
+    display: inline-block;
+}
+
+
+.content_r .middle{
+    margin-bottom: 12px;
+}
+.content_r .middle p{
+    font-size: 14px;
+    color: #072;
+    display: inline-block;
+
+}
+.content_r .middle span{
+    font-size: 12px;
+}
+.content_r .middle span:hover{
+    background-color: #37a;
+    color: white;
+}
+
+
+.button a{
+    color: #37a;
+    font-size: 14px;
+    margin-bottom: 6px;
+}
+.button p{
+    color: #aaaaaa;
+    font-size: 13px;
+    margin-bottom: 15px;
+}
+.button a:hover{
+    background-color: #37a;
+    color: white;
+}
+

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/2022-6.2~6.4css网页/Douban.html

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="clear.css">
+    <link rel="stylesheet" href="Jpublic.css">
+    <link rel="stylesheet" href="Douban.css">
+</head>
+
+<body>
+    <div class="kind">
+        <div class="head">
+            <p>
+                热点内容&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·
+            </p>
+            <span>（&nbsp;<a href="">更多</a>&nbsp;）</span>
+
+        </div>
+        <div class="content">
+            <div class="content_l">
+                <ul>
+                    <li>
+                        <img src="https://img3.doubanio.com/view/photo/albumcover/public/p2553611440.webp" alt="">
+                        <div class="des">
+                            <a href="">不能进入历史的历史</a>
+                            <span>&nbsp;19张照片</span>
+                        </div>
+                    </li>
+                    <li>
+                        <img src="https://img3.doubanio.com/view/photo/albumcover/public/p2433358700.webp" alt="">
+                        <div class="des">
+                            <a href="">練習簿 | sketchbook</a>
+                            <span>&nbsp;30张照片</span>
+                        </div>
+                    </li>
+                    <li>
+                        <img src="https://img2.doubanio.com/view/photo/albumcover/public/p2396530441.webp" alt="">
+                        <div class="des">
+                            <a href="">我的宾得67II日记</a>
+                            <span>&nbsp;199张照片</span>
+                        </div>
+                    </li>
+                    <li>
+                        <img src="https://img1.doubanio.com/view/photo/albumcover/public/p2633666057.webp" alt="">
+                        <div class="des">
+                            <a href="">好好吃早饭</a>
+                            <span>&nbsp;330张照片</span>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="content_m">
+                <div class="top">
+                    <a href="">叶芝和他的拜占庭诗篇</a>
+                    <p class="introduce">purplepine的日记</p>
+                    <p>去年四月，赋闲在家的我偶然地和一位朋友译起了叶芝的诗。此前我对这位二十世纪的大诗人和现代主义文学奠基人所知甚少，这样直接上手翻译，一开始自然如行雾中，但不带先入...</p>
+                </div>
+                <div class="down">
+                    <ul>
+                        <li>
+                            <a href="">根据真实案件改编的悬疑小说：死去的人，真的会为了复仇而活过来吗？</a>
+                        </li>
+                        <li>
+                            <a href="">论家庭关系里好好说话的重要性</a>
+                        </li>
+                        <li>
+                            <a href="">男友为我过生日没花一分钱，该不该分手？</a>
+                        </li>
+                        <li>
+                            <a href="">媒介蒙太奇 之 观看奥运</a>
+                        </li>
+                        <li>
+                            <a href="">两个月108公里，业余游泳爱好者路在何方</a>
+                        </li>
+                        <li>
+                            <a href="">一名平凡读者的买书总结</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="content_r">
+                <div class="up">
+                    <div class="ad">广告</div>
+                </div>
+                <div class="middle">
+                    <p>热点话题&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·</p>
+                    <span>（&nbsp;<a href="">去话题广场</a>&nbsp;）</span>
+                </div>
+                <div class="button">
+                    <ul>
+                        <li>
+                            <a href="">你记忆中的粽子味道</a>
+                            <p>2.3万次浏览</p>
+                        </li>
+                        <li>
+                            <a href="">各地端午习俗考</a>
+                            <p>120.1万次浏览</p>
+                        </li>
+                        <li>
+                            <a href="">端午包粽子大赛</a>
+                            <p>120.7万次浏览</p>
+                        </li>
+                        <li>
+                            <a href="">看展记</a>
+                            <p>9456.5万次浏览</p>
+                        </li>
+                        <li>
+                            <a href="">那些沉睡在城市中的“烂尾楼”</a>
+                            <p>新话题 · 8419次浏览</p>
+                        </li>
+                        <li>
+                            <a href="">囤物癖的居家生活指南</a>
+                            <p>10.1万次浏览</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/2022-6.2~6.4css网页/J.css

@@ -0,0 +1,71 @@
+.content{
+    width: 280px;
+    
+}
+.up {
+    width: 100%;
+    font-size: 14px;
+    color: #969696;
+    margin-bottom: 15px;
+    display: inline-block;
+    box-sizing: border-box;
+}
+.up .other i{
+    font-size: 14px;
+}
+
+.middle{
+    width: 100%;
+
+}
+.middle li{
+    overflow: hidden;
+    margin-bottom: 15px;
+}
+.middle li img{
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    margin-right: 10px;
+}
+
+.middle li .name .name_up{
+    width: calc(280px - 58px);
+
+}
+.middle li .name .name_up .name_up_l{
+    color: #333;
+    font-size: 14px;
+    padding-top: 5px;
+    margin-right: 60px;
+}
+.middle li .name .name_up .name_up_r{
+    color: #42c02e;
+    font-size: 13px;
+    margin-top: 5px;
+}
+.middle li .name .name_up .name_up_r i{
+    font-size: 13px;
+}
+.middle li .name .name_bottom{
+    color: #969696;
+    font-size: 12px;
+    margin-top: 7px;
+}
+
+.down{
+    border: 1px solid #dcdcdc;
+    background-color:#f7f7f7;;
+    border-radius: 4px;
+    font-size: 13px;
+    color: #787878;
+    text-align: center;
+    line-height: 35.229px;
+    height: 35.229px;
+}
+.down span{}
+.down i{
+    font-size: 12px;
+    font-weight: 600;
+}
+

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/2022-6.2~6.4css网页/Jianshu.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3447676_7otp41co3fx.css">
+    <link rel="stylesheet" href="clear.css">
+    <link rel="stylesheet" href="Jpublic.css">
+    <link rel="stylesheet" href="J.css">
+<body>
+<div class="content">
+    <div class="up hidden">
+        <div class="author left">推荐作者</div>
+        <div class="other right">
+            <i class="iconfont icon-shuaxin"></i>
+            <span>换一批</span>
+        </div>
+    </div>
+    <ul class="middle">
+        <li>
+            <img class="left" src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="加载出错">
+            <div class="name left">
+                <div class="name_up hidden">
+                    <div class="name_up_l left">卢璐说</div>
+                    <div class="name_up_r right">
+                        <i class="iconfont icon-jiahao1"></i>
+                        <span>关注</span>
+                    </div>
+                </div>
+                <div class="name_bottom">写了2154.9k字 · 34.8k喜欢</div>
+            </div>
+        </li>
+        <li>
+            <img class="left" src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="加载出错">
+            <div class="name left">
+                <div class="name_up hidden">
+                    <div class="name_up_l left">卢璐说</div>
+                    <div class="name_up_r right">
+                        <i class="iconfont icon-jiahao1"></i>
+                        <span>关注</span>
+                    </div>
+                </div>
+                <div class="name_bottom">写了2154.9k字 · 34.8k喜欢</div>
+            </div>
+        </li>
+        <li>
+            <img class="left" src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="加载出错">
+            <div class="name left">
+                <div class="name_up hidden">
+                    <div class="name_up_l left">卢璐说</div>
+                    <div class="name_up_r right">
+                        <i class="iconfont icon-jiahao1"></i>
+                        <span>关注</span>
+                    </div>
+                </div>
+                <div class="name_bottom">写了2154.9k字 · 34.8k喜欢</div>
+            </div>
+        </li>
+        <li>
+            <img class="left" src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="加载出错">
+            <div class="name left">
+                <div class="name_up hidden">
+                    <div class="name_up_l left">卢璐说</div>
+                    <div class="name_up_r right">
+                        <i class="iconfont icon-jiahao1"></i>
+                        <span>关注</span>
+                    </div>
+                </div>
+                <div class="name_bottom">写了2154.9k字 · 34.8k喜欢</div>
+            </div>
+        </li>
+        <li>
+            <img class="left" src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="加载出错">
+            <div class="name left">
+                <div class="name_up hidden">
+                    <div class="name_up_l left">卢璐说</div>
+                    <div class="name_up_r right">
+                        <i class="iconfont icon-jiahao1"></i>
+                        <span>关注</span>
+                    </div>
+                </div>
+                <div class="name_bottom">写了2154.9k字 · 34.8k喜欢</div>
+            </div>
+        </li>
+    </ul>
+    <div class="down">
+        <span>查看全部</span>
+        <i class="iconfont icon-dayufuhao"></i>
+    </div>
+</div>
+</body>
+</html>

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/2022-6.2~6.4css网页/Jpublic.css

@@ -0,0 +1,12 @@
+/* 公共使用率高的css代码 */
+.right{
+    float: right;
+}
+
+.left{
+    float: left;
+}
+
+.hidden{
+    overflow: hidden;
+}

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/2022-6.2~6.4css网页/QQmusic.css

@@ -0,0 +1,127 @@
+.recommend{
+    margin: 0 auto;
+}
+.title{
+    font-size: 22px;
+    color: #000;
+    height: 40px;
+    font-weight: 500;
+    text-align: center;
+    background-color: #f3f3f3;
+    padding-top: 50px;
+    padding-bottom: 24px;
+}
+
+
+
+.menu{
+    text-align: center;
+    background-color: #f8f8f8;
+    height: 50px;
+}
+.menu li{
+    font-size: 12px;
+    color: #333;
+    font-weight: 400;
+    display: inline-block;
+    margin: 0 24px;
+}
+.menu .active{
+    color: #31c27c;
+}
+.menu li:hover{
+    color: #31c27c;
+}
+
+
+
+
+.icon ul{
+    overflow: hidden;
+    width: 898px;
+    margin: 0 auto;
+    background-color: #fdfdfd;
+}
+.icon li{
+    width: 170px;
+    float: left;
+    margin-right: 12px;
+}
+.icon li:last-child{
+    margin-right: 0;
+}
+.icon img{
+width: 100%;
+height: 170px;
+margin-bottom: 10px;
+}
+.icon p{
+font-size: 10px;
+}
+.icon p:nth-child(3){
+color: #999;
+font-size: 10px;
+}
+.icon p:nth-child(2){
+    width: 100%;
+    overflow: hidden;
+    /* //单行文本溢出显示省略号 */
+    text-overflow: ellipsis; 
+    /* //单行文本不会换行 */
+    white-space: nowrap; 
+}
+
+
+
+
+
+.more ul{
+    text-align: center;
+    margin-top: 40px;
+}
+.more li{
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: rgba(0,0,0,.1);
+    display: inline-block;
+    margin-left: 17px;
+}
+.more .active{
+    background-color: rgba(0,0,0,.3);
+}
+.more li:hover{
+    background-color: rgba(0,0,0,.3);
+}
+
+
+/* .icon .imgs{
+    width: 100%;
+    height: 170px;
+    background-image: url('https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1');
+    background-size: 100%;
+    padding: calc((100% - 50px)/2);
+    box-sizing: border-box;
+    transition: all ease 1s;
+}
+.icon .imgs .play_btn{
+    background: #ffffff;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    text-align: center;
+    opacity: 0;
+    transition: all ease 0.5s;
+}
+.icon .imgs:hover{
+    background-size: 110%;
+}
+.icon .imgs:hover .play_btn{
+    opacity: 1;
+}
+.icon .imgs .play_btn i{
+    font-size: 20px;
+    line-height: 50px;
+} */
+
+

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/2022-6.2~6.4css网页/QQmusic.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3447676_jqloxblwkk.css">
+    <link rel="stylesheet" href="clear.css">
+    <link rel="stylesheet" href="Jpublic.css">
+    <link rel="stylesheet" href="QQmusic.css">
+</head>
+
+<body>
+    <div class="recommend">
+        <div class="title">歌&nbsp单&nbsp推&nbsp荐</div>
+        <div class="menu">
+            <ul>
+                <li class="active">为你推荐</li>
+                <li>英语</li>
+                <li>短视频热歌</li>
+                <li>经典</li>
+                <li>官方歌单</li>
+                <li>情歌</li>
+            </ul>
+        </div>
+        <div class="icon">
+            <ul>
+                <li>
+                    <img src="https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1"
+                        alt="">
+                    <p>贺峻霖 | 少年十七未来山海共期</p>
+                    <p>播放量：43.6万</p>
+                </li>
+                <li>
+                    <img src="https://qpic.y.qq.com/music_cover/OgCriaBUhCkBZmhEuP4OI4rTq7nEvhfN6ejlhWFStShtqr5TIGxSUbQ/300?n=1"
+                        alt="">
+                    <p>[情感片段] .每首都是一个故事</p>
+                    <p>播放量：4157.5万</p>
+                </li>
+                <li>
+                    <img src="https://qpic.y.qq.com/music_cover/r9ZyNKibEJFHSPoVPMRgbXsWZbvIlw1Vdfxr9gOGRF1ENt2aEV4RibQvWicK747NLSb/300?n=1"
+                        alt="">
+                    <p>节奏卡点｜超燃来袭开启休闲模式</p>
+                    <p>播放量：1420.5万</p>
+                </li>
+                <li>
+                    <img src="https://qpic.y.qq.com/music_cover/dq5UenayM4jZR6dQv1kVk81DCJpAO9icbPe3nicM10bbz8micIlywX03w/300?n=1"
+                        alt="">
+                    <p>【沉迷学习】轻音乐助力效率加倍</p>
+                    <p>播放量：3841.1万</p>
+                </li>
+                <li>
+                    <img src="https://qpic.y.qq.com/music_cover/or9WvCN6ENQ50YuvJ76Qfiba7MPk46sKDFnxUibvdBWBbsWWKZq9FMXw/300?n=1"
+                        alt="">
+                    <p>极致踩点丨B站高燃混剪收录单</p>
+                    <p>播放量：2461.5万</p>
+                </li>
+
+
+                <!-- <div class="imgs">
+                    <div class="play_btn">
+                        <i class="iconfont icon-bofang"></i>
+                    </div>
+                </div> -->
+            </ul>
+
+        </div>
+        <div class="more">
+            <ul>
+                <li class="active"></li>
+                <li></li>
+                <li></li>
+            </ul>
+        </div>
+    </div>
+</body>
+
+</html>

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/2022-6.2~6.4css网页/Z.CSS

@@ -0,0 +1,89 @@
+.top{
+    margin: 0px auto;
+    overflow: hidden;
+    /* auto没用不知道怎么调所以用了上课提了一嘴的弹性盒子 */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.top .logo img{
+    height: 88px;
+    width: 272px;
+    margin-top: 6px;
+    float: left;
+}
+
+.search{
+    padding-top: 18px;
+    margin-left: 64px;
+    float: left;
+}
+.search .search_up{
+    margin-bottom: 8px;
+
+
+}
+.search .search_up ul{
+    font-size: 12px;
+    color: #333;
+    overflow: hidden;
+}
+.search .search_up ul .ps{
+    font-weight: 700;
+}
+
+.search .search_up li{
+    margin-right: 15px;
+    float: left;
+
+}
+
+.search .search_down{
+    overflow: hidden;
+
+}
+.search .search_down input{
+    width: 368px;
+    height: 20px;
+    padding: 7px 10px;
+    border: 1px solid #ccc;
+    border-right: none;
+    float: left;
+}
+.search .search_down .button{
+    width: 80px;
+    height: 36px;
+    background: #3686f1;
+    font-size: 16px;
+    float: right;
+    color: #ffffff;
+    text-align: center;
+    line-height: 36px;
+}
+
+
+.icon{
+    margin-top: calc(16px + 18px + 8px - 2px);
+    float: left;
+    margin-left: 12px;
+}
+.icon li{
+    display: inline-block;
+    font-size: 12px;
+    text-align: center;
+}
+.icon li:nth-child(2){
+    margin: 0 18px;
+}
+.icon li a{}
+.icon li a img{
+    width: 20px;
+    height: 20px;
+}
+.icon li a div{}
+
+
+
+
+
+

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/2022-6.2~6.4css网页/Zmenu.css

@@ -0,0 +1,261 @@
+
+.clear{
+    clear: both;
+}
+.head{
+    width: 1200px;
+    overflow: hidden;
+    margin: 0 auto;
+   }
+
+.head p{
+    font-size: 24px;
+    font-weight: 100;
+    float: left;
+    margin-bottom: 6px;
+    }
+
+
+.head p span{
+    font-weight: bold;
+    font-size: 24px; 
+   
+    }
+
+.head ul{
+    float: right;
+    }
+    
+.head ul li {
+    display: inline-block;
+}
+
+.head ul li a{
+    color: #333;
+    font-size: 12px;
+    }
+
+.head ul li a:hover{
+    color: crimson;
+    text-decoration: underline;
+    }
+    
+.head ul li span{
+    margin: 7.5px;
+    color: #ccc;
+    font-weight: 100;
+    font-size: 14px;
+
+    }
+
+.head ul li i {
+    font-size: 12px;
+    font-weight: 100;
+    }
+
+.content{
+    width: 1200px;
+    margin: 0 auto;
+    overflow: hidden;
+    }
+.content_l{
+    width: 300px;
+    float: left;
+    }
+
+.content_l_up_head{
+    background: #1d89bf;
+    padding-left: 20px;
+    overflow: hidden;
+    color: #fff;
+    height: 38px;
+    line-height: 38px;
+
+    }
+.content_l_up .one{
+    float: left;
+    font-size: 16px;
+    margin-right: 38px;
+    }
+
+.content_l_up .two{
+    font-size: 14px;
+    float: left;
+    }
+.two li{
+    float: left;
+    height: 100%;
+    width: 55px;
+    text-align: center;
+    }
+.two li:hover{
+    background-color: #3495c6;
+    }
+.two .two_active{
+    background-color: #52a7d9;
+    }
+
+.content_l_up_all{
+    background-color:#52a7d9 ;
+    }
+    
+.middle{
+    overflow: hidden;
+    padding: 20px 0 10px 20px;
+    box-sizing: border-box;
+    }
+.middle p{
+    display: inline-block;
+    color: #fff;
+    font-size: 12px;
+    margin-left: 10px;
+    margin-bottom: 5px;
+    }
+.middle_l{
+    float: left;
+}
+.middle_l li , .middle_r li{
+    margin-bottom: 8px;
+}
+
+.middle li p:nth-child(2):hover{
+    text-decoration: underline;
+}
+.middle_top p:nth-child(1){
+    width: 16px;
+    height: 16px;
+    background-color: #fff; 
+    color: #52a7d9; 
+    text-align: center;
+    line-height: 16px; 
+    }
+.middle_r{
+    float: left;
+    margin-left: 42px;
+    }
+
+
+.content_l_up_all .more{
+    width: 260px;
+    height: 22px;
+    margin: 0 auto;
+    padding: 15px 0;
+    font-size: 14px;
+    color: #fff;
+    text-align: center;
+    border-top: 1px dashed #1d89bf;   
+}
+
+.more i{
+    font-size: 14px;
+    font-weight: 100;
+}
+
+
+.content_l_down{
+    height: 208px;
+    padding: 25px 0 0 20px;
+    border: 1px solid #ebebeb;
+    background-color: #f5f5f5;
+}
+.content_l_down .title{
+    height: 26px;
+    color: #666;
+    font-size: 16px;
+}
+.content_l_down .kind{
+    margin: 5px 0 0;
+    line-height: 30px;
+    overflow: hidden;
+
+}
+.content_l_down .kind li a{
+    color: #333;
+    font-size: 14px;
+    margin-right: 20px;
+    float: left;
+}
+
+.kind li a:hover{
+    color: crimson;
+    text-decoration: underline;
+}
+
+/* 右边部分css */
+.content_r{
+    float: left;
+    width: 900px;
+}
+.content_r .page{
+    overflow: hidden;
+    border-top: 1px solid #ebebeb;
+}
+
+
+.page li{
+    width: 184px;
+    height: 195px;
+    padding: 20px 20px 15px;
+    border-right: 1px solid #ebebeb;
+    border-bottom: 1px solid #ebebeb;
+    float: left;
+}
+.page li img{
+    width: 160px;
+    height: 120px;
+    margin: 0 calc((100% - 160px)/2);
+}
+
+.page li p{
+    height: 40px;
+    font-size: 14px;
+    color: #333;
+    
+    /* 去除保持单词完整性 */
+    word-break: break-all;
+    
+    /* 设置多行超出显示省略号 */
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+}
+
+.page li p:nth-child(2):hover{
+    color: crimson;
+    text-decoration: underline;
+}
+
+.page li p:nth-child(3){
+    height: 24px;
+    font-size: 12px;
+    margin-top: 5px;
+    line-height: 24px;
+    color: #999;
+}
+.page li p span{
+    font-size: 18px;
+    color: #f33;
+}
+
+.icon{
+    text-align: center;
+    padding: 13px;
+    border-right: 1px solid #ebebeb;
+    border-bottom: 1px solid #ebebeb;
+}
+.icon li{
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: #e6e6e6;;
+    display: inline-block;
+    margin:0 6px;
+}   
+
+.icon .active{
+    background: #1d89bf;
+}
+
+

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/2022-6.2~6.4css网页/Zmenu.html

@@ -0,0 +1,268 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3447676_7v6ms986hiu.css">
+    <link rel="stylesheet" href="clear.css">
+    <link rel="stylesheet" href="Jpublic.css">
+    <link rel="stylesheet" href="Zmenu.css">
+</head>
+
+<body>
+
+    <div class="head">
+        <p><span>2F</span>&nbsp笔记本电脑</p>
+        <ul>
+            <li>
+                <a href="">联想</a>
+                <span>|</span>
+            </li>
+            <li>
+                <a href="">惠普</a>
+                <span>|</span>
+            </li>
+            <li>
+                <a href="">戴尔</a>
+                <span>|</span>
+            </li>
+            <li>
+                <a href="">华为</a>
+                <span>|</span>
+            </li>
+            <li>
+                <a href="">华硕</a>
+                <span>|</span>
+            </li>
+            <li>
+                <a href="">Acer宏碁</a>
+                <span>|</span>
+            </li>
+            <li>
+                <a href="">微软</a>
+                <span>|</span>
+            </li>
+            <li>
+                <a href="">苹果</a>
+                <span>|</span>
+            </li>
+            <li>
+                <a href="">Thinkpad</a>
+                <span>|</span>
+            </li>
+            <li>
+                <a href="">外星人</a>
+                <span>|</span>
+            </li>
+            <li>
+                <a href="">神舟</a>
+                <span>|</span>
+            </li>
+            <li>
+                <a href="">更多</a>
+                <i class="iconfont icon-z044"></i>
+            </li>
+        </ul>
+    </div>
+    <div class="content">
+        <div class="content_l">
+            <div class="content_l_up">
+                <div class="content_l_up_head">
+                    <div class="one">热度排行</div>
+                    <ul class="two">
+                        <li class="two_active">品牌</li>
+                        <li>型号</li>
+                        <li>新品</li>
+                    </ul>
+
+                </div>
+                <!-- (清除浮动) -->
+                <div class="clear"></div>
+                <div class="content_l_up_all">
+                    <div class="middle">
+                        <ul class="middle_l">
+                            <li class="middle_top">
+                                <p>1</p>
+                                <p>联想(385款)</p>
+                            </li>
+                            <li class="middle_top">
+                                <p>2</p>
+                                <p>联想(385款)</p>
+                            </li>
+                            <li class="middle_top">
+                                <p>3</p>
+                                <p>联想(385款)</p>
+                            </li>
+                            <li>
+                                <p>4</p>
+                                <p>联想(385款)</p>
+                            </li>
+                            <li>
+                                <p>5</p>
+                                <p>联想(385款)</p>
+                            </li>
+                        </ul>
+                        <ul class="middle_r">
+                            <li>
+                                <p>6</p>
+                                <p>联想(385款)</p>
+                            </li>
+                            <li>
+                                <p>7</p>
+                                <p>联想(385款)</p>
+                            </li>
+                            <li>
+                                <p>8</p>
+                                <p>联想(385款)</p>
+                            </li>
+                            <li>
+                                <p>9</p>
+                                <p>联想(385款)</p>
+                            </li>
+                            <li>
+                                <p>10</p>
+                                <p>联想(385款)</p>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="more">
+                        查看更多排行榜<i class="iconfont icon-z044"></i>
+                    </div>
+                </div>
+
+            </div>
+            <div class="content_l_down">
+                <div class="title">热门搜索</div>
+                <ul class="kind">
+                    <li>
+                        <a href="">笔记本</a>
+                    </li>
+                    <li>
+                        <a href="">华为</a>
+                    </li>
+                    <li>
+                        <a href="">联想</a>
+                    </li>
+                    <li>
+                        <a href="">戴尔</a>
+                    </li>
+                    <li>
+                        <a href="">苹果</a>
+                    </li>
+                    <li>
+                        <a href="">华硕</a>
+                    </li>
+                    <li>
+                        <a href="">惠普</a>
+                    </li>
+                    <li>
+                        <a href="">Acer</a>
+                    </li>
+                    <li>
+                        <a href="">时尚轻薄本</a>
+                    </li>
+                    <li>
+                        <a href="">游戏本</a>
+                    </li>
+                    <li>
+                        <a href="">RTX 30系列</a>
+                    </li>
+                    <li>
+                        <a href="">商务本</a>
+                    </li>
+                    <li>
+                        <a href="">十一代i7</a>
+                    </li>
+                    <li>
+                        <a href="">酷睿i9</a>
+                    </li>
+                    <li>
+                        <a href="">台式电脑</a>
+                    </li>
+                    <li>
+                        <a href="">迷你台式电脑</a>
+                    </li>
+                    <li>
+                        <a href="">一体电脑</a>
+                    </li>
+                    <li>
+                        <a href="">工作站</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="content_r">
+            <ul class="page">
+                <li>
+                    <img src="https://2d.zol-img.com.cn/product/205_160x120/447/ceWTvcP3iBwH6.jpg" alt="显示错误">
+                    <p>荣耀MagicBook Pro 2020款(i7 10510U/16GB/512GB/MX350)</p>
+                    <p>最低价：
+                        <span>￥8699</span>
+                    </p>
+                </li>
+                <li>
+                    <img src="https://2d.zol-img.com.cn/product/205_160x120/447/ceWTvcP3iBwH6.jpg" alt="显示错误">
+                    <p>荣耀MagicBook Pro 2020款(i7 10510U/16GB/512GB/MX350)</p>
+                    <p>最低价：
+                        <span>￥8699</span>
+                    </p>
+                </li>
+                <li>
+                    <img src="https://2d.zol-img.com.cn/product/205_160x120/447/ceWTvcP3iBwH6.jpg" alt="显示错误">
+                    <p>荣耀MagicBook Pro 2020款(i7 10510U/16GB/512GB/MX350)</p>
+                    <p>最低价：
+                        <span>￥8699</span>
+                    </p>
+                </li>
+                <li>
+                    <img src="https://2d.zol-img.com.cn/product/205_160x120/447/ceWTvcP3iBwH6.jpg" alt="显示错误">
+                    <p>荣耀MagicBook Pro 2020款(i7 10510U/16GB/512GB/MX350)</p>
+                    <p>最低价：
+                        <span>￥8699</span>
+                    </p>
+                </li>
+                <li>
+                    <img src="https://2d.zol-img.com.cn/product/205_160x120/447/ceWTvcP3iBwH6.jpg" alt="显示错误">
+                    <p>荣耀MagicBook Pro 2020款(i7 10510U/16GB/512GB/MX350)</p>
+                    <p>最低价：
+                        <span>￥8699</span>
+                    </p>
+                </li>
+                <li>
+                    <img src="https://2d.zol-img.com.cn/product/205_160x120/447/ceWTvcP3iBwH6.jpg" alt="显示错误">
+                    <p>荣耀MagicBook Pro 2020款(i7 10510U/16GB/512GB/MX350)</p>
+                    <p>最低价：
+                        <span>￥8699</span>
+                    </p>
+                </li>
+                <li>
+                    <img src="https://2d.zol-img.com.cn/product/205_160x120/447/ceWTvcP3iBwH6.jpg" alt="显示错误">
+                    <p>荣耀MagicBook Pro 2020款(i7 10510U/16GB/512GB/MX350)</p>
+                    <p>最低价：
+                        <span>￥8699</span>
+                    </p>
+                </li>
+                <li>
+                    <img src="https://2d.zol-img.com.cn/product/205_160x120/447/ceWTvcP3iBwH6.jpg" alt="显示错误">
+                    <p>荣耀MagicBook Pro 2020款(i7 10510U/16GB/512GB/MX350)</p>
+                    <p>最低价：
+                        <span>￥8699</span>
+                    </p>
+                </li>
+                
+            </ul>
+            <ul class="icon">
+                <li class="active"></li>
+                <li></li>
+                <li></li>
+                <li></li>
+            </ul>
+        </div>
+    </div>
+
+</body>
+
+</html>

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/2022-6.2~6.4css网页/clear.css

@@ -0,0 +1,12 @@
+/* 清除浏览器默认样式 */
+body,h1,h2,h3,h4,h5,h6,ul,li,p{
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+a {
+    text-decoration: none;
+}
+html{
+    font-size: 0;
+}

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/2022-6.2~6.4css网页/下拉菜单.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="clear.css">
+    <link rel="stylesheet" href="Jpublic.css">
+    <style>
+        .menu > li{
+            float: left;
+            margin-left: 15px;
+            position: relative;
+        }
+        .menu .dish {
+            display: none;
+            /* 绝对定位脱离文档流就不会影响上面的菜单 */
+            position: absolute;
+            /* 但是需要手动加宽度 */
+            width: 124px;
+        }
+
+        /* li标签悬浮的时候作用于dish */
+        .menu > li:hover .dish{
+            display: block;
+        }
+        .menu{
+            font-size: 14px;
+        }
+    </style>
+</head>
+<body>
+    <ul class="menu">
+        <li>首页1</li>
+        <li class="top">首页2
+            <ul class="dish">
+                <li>菜单2-1</li>
+                <li>菜单2-2</li>
+                <li>菜单2-3</li>
+                <li>菜单2-4</li>
+                <li>菜单2-5</li>
+            </ul>
+        </li>
+        <li>首页3</li>
+        <li>首页4</li>
+        <li>首页5</li>
+    </ul>
+    
+</body>
+</html>

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/2022-6.2~6.4css网页/中关村顶部.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="clear.css">
+    <link rel="stylesheet" href="Jpublic.css">
+    <link rel="stylesheet" href="Z.css">
+</head>
+<body>
+    <div class="top">
+        <div class="logo">
+            <img src="https://icon.zol-img.com.cn/mainpage/2019logo/festival/2022duanwu-logo_2x.png" alt="">
+        </div>
+        <div class="search">
+            <div class="search_up">
+                <ul>
+                    <li class="ps">综合</li>
+                    <li>产品</li>
+                    <li>资讯</li>
+                    <li>论坛</li>
+                    <li>下载</li>
+                    <li>问答</li>
+                    <li>图片</li>
+                    <li>视频</li>
+                    <li>口碑</li>
+                </ul>
+            </div>
+            <div class="search_down">
+                <input type="text" placeholder="请输入查找内容">
+                <div class="button">搜索</div>
+            </div>
+
+        </div>
+        <ul class="icon">
+            <li>
+                <a href="https://www.zol.com.cn/help/index.html">
+                    <img src="https://icon.zol-img.com.cn/mainpage/iconfont/201909/down-APPicon@2x.png" alt="">
+                    <div>下载APP</div>
+                </a>
+            </li>
+            <li>
+                <a href="https://labs.zol.com.cn/rich.html">
+                    <img src="https://icon.zol-img.com.cn/mainpage/iconfont/201909/youliaopingce-logo@2x.png" alt="">
+                    <div>有料评测</div>
+                </a>
+            </li>
+            <li>
+                <a href="https://zj.zol.com.cn/">
+                    <img src="https://icon.zol-img.com.cn/mainpage/iconfont/201909/icon_zj.svg" alt="">
+                    <div>模拟攒机</div>
+                </a>
+            </li>
+        </ul>
+    </div>
+    
+</body>
+</html>

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/2022.6.19下拉刷新/下拉刷新.html

@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        body,
+        ul,
+        li {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        .header {
+            width: 100%;
+            height: 45px;
+            position: fixed;
+            left: 0;
+            right: 0;
+            top: 0;
+            background: #fff;
+            z-index: 999;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 10px;
+            box-sizing: border-box;
+            border-bottom: 1px solid #dadada;
+        }
+
+        .header img {
+            width: 20px;
+            height: 20px;
+        }
+
+
+        .content {
+            margin-top: 45px;
+        }
+
+        .content li {
+            height: 40px;
+            display: flex;
+            align-items: center;
+            border-bottom: 1px solid #dadada;
+            padding: 0 10px;
+        }
+
+        .refresh {
+            width: 30px;
+            height: 30px;
+            text-align: center;
+            line-height: 30px;
+            position: fixed;
+            left: 50%;
+            z-index: 998;
+            background: #fff;
+            border-radius: 100%;
+            box-shadow: 0px 0px 9px #858585;
+            margin-left: -15px;
+            transition: all 0.1s;
+        }
+
+        .refresh img {
+            width: 100%;
+            height: 100%;
+        }
+
+        .rotate {
+            animation: rotateAction 1s linear infinite;
+        }
+
+        @keyframes rotateAction {
+            0% {
+                transform: rotate(0deg);
+            }
+
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="header">
+        <img src="../img/64/左.png" alt="">
+        <span>热门视频</span>
+        <span></span>
+    </div>
+
+    <ul class="content">
+        <li>列表1</li>
+        <li>列表2</li>
+        <li>列表3</li>
+        <li>列表4</li>
+        <li>列表5</li>
+        <li>列表6</li>
+        <li>列表7</li>
+        <li>列表8</li>
+        <li>列表9</li>
+        <li>列表10</li>
+        <li>列表11</li>
+        <li>列表12</li>
+        <li>列表13</li>
+        <li>列表14</li>
+        <li>列表15</li>
+        <li>列表16</li>
+        <li>列表17</li>
+        <li>列表18</li>
+        <li>列表19</li>
+        <li>列表20</li>
+        <li>列表21</li>
+        <li>列表22</li>
+        <li>列表23</li>
+        <li>列表24</li>
+        <li>列表25</li>
+        <li>列表26</li>
+        <li>列表27</li>
+        <li>列表28</li>
+        <li>列表29</li>
+        <li>列表30</li>
+        <li>列表31</li>
+        <li>列表32</li>
+        <li>列表33</li>
+        <li>列表34</li>
+        <li>列表35</li>
+        <li>列表36</li>
+        <li>列表37</li>
+        <li>列表38</li>
+        <li>列表39</li>
+        <li>列表40</li>
+    </ul>
+
+    <div class="refresh" style="top: 10px;">
+        <img src="../img/64/朋友圈.png" alt="">
+    </div>
+
+
+
+    <script>
+        var startY = 0,
+            moveY = 0,
+            endY = 0;
+
+        if (isTop()) {
+            addMove();
+        } else {
+            window.addEventListener('scroll', () => isTop() ? addMove() : '')
+        }
+
+
+
+        function addMove() {
+            $(".content").addEventListener('touchstart', (e) => {
+                startY = e.targetTouches[0].pageY
+            });
+
+            $(".content").addEventListener('touchmove', (e) => {
+                if (isTop()) {
+                    moveY = e.targetTouches[0].pageY;
+                    if (moveY > startY) {
+                        // 必须要阻止默认事件，如果不阻止会和页面的滚动相互冲突
+                        e.preventDefault();
+                        var sTop = moveY - startY;
+
+                        if (sTop <= 120) {
+                            $(".refresh").style = `
+                          top: ${sTop}px;
+                          transform: rotate(${sTop * 3}deg);
+                        `;
+                        }
+                    }
+                }
+            });
+
+            $(".content").addEventListener('touchend', (e) => {
+                endY = e.changedTouches[0].pageY;
+                var eTop = endY - startY;
+
+                if (eTop <= 60) {
+                    $(".refresh").style = `
+                    top: 10px;
+                    transform: rotate(0deg);
+                `;
+                } else {
+                    $(".refresh").className = "refresh rotate"
+                    $(".refresh").style = `
+                    top: 80px;
+                    transform: rotate(0}deg);
+                `;
+
+
+
+                    setTimeout(() => {
+                        $(".refresh").style = `
+                        top: 10px;
+                        transform: rotate(0deg);
+                    `;
+                        $(".refresh").className = "refresh"
+
+                    }, 2000)
+                }
+            });
+        }
+
+        function isTop() {
+            return document.documentElement.scrollTop === 0 ? true : false
+        }
+
+        function $(className) {
+            return document.querySelector(className)
+        }
+    </script>
+</body>
+
+</html>